只要圖片中間部分CSS是一種CSS技巧,它可以讓圖片的中心部分放大或縮小,而不影響圖片的其他部分。這種技巧可以讓設(shè)計師更加靈活地使用圖片,豐富頁面的視覺效果。
下面展示了一段使用只要圖片中間部分CSS技巧的代碼:
.image-wrapper { width: 200px; height: 200px; overflow: hidden; } .image-wrapper img { display: block; margin: auto; height: auto; width: 100%; transform: translate(-50%, -50%); position: relative; top: 50%; left: 50%; } .image-wrapper:focus img { height: 150%; width: 150%; }
可以使用上面的代碼來實現(xiàn)只要圖片中間部分CSS效果。首先,我們創(chuàng)建一個包含圖片的容器,將其設(shè)置為固定大小,并隱藏超出容器大小的部分。接著,將圖片設(shè)置為塊級元素,讓其居中顯示,同時使用translate和絕對定位將其移動到容器中心。
最后,當(dāng)容器被聚焦時,將圖片的大小設(shè)置為150%。這會讓圖片的中心部分放大,而不改變其他部分的大小。
這種技巧可以應(yīng)用于很多設(shè)計場景中。比如,可以用來突出顯示產(chǎn)品的細(xì)節(jié),動畫效果中的焦點部分,或者是在畫廊中讓圖片展示更加生動有趣。
上一篇可以css(
下一篇合并表格框線對齊 css