這篇文章給大家分享的內容是關於使用css的過濾器實現圖片的模糊效果,有需要的朋友可以參考一下,話不多說,讓我們來看一下正文內容。
我最近在css中遇到了filter:blur的問題,首先讓我們看一下頁面中的一個圖片,如下所示:
HTML:
<div class="imageContainer"> <img src="image/1.jpg" alt="使用css的filter:blur實現圖片的模糊效果(程式碼範例)" > </div>
CSS:
.imageContainer { border: solid 5px black; width: 1024px; height: 768px; }
現在,讓我們套用一個很好的模糊效果:
img { -webkit-filter: blur(30px); }
效果如下:
觀察到影像模糊超出其容器的邊框,並在模糊影像和黑色邊框之間出現「發光」效果,現在我們來解決這個問題。
解決方法:
.imageContainer { overflow: hidden; } img { +transform:scale(1.1); }
效果如下:
以上是使用css的filter:blur實現圖片的模糊效果(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!