首頁  >  文章  >  web前端  >  使用css的filter:blur實現圖片的模糊效果(程式碼範例)

使用css的filter:blur實現圖片的模糊效果(程式碼範例)

不言
不言原創
2018-11-07 14:22:554379瀏覽

這篇文章給大家分享的內容是關於使用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;
    }

使用css的filter:blur實現圖片的模糊效果(程式碼範例)

現在,讓我們套用一個很好的模糊效果:

img {
-webkit-filter: blur(30px);
}

效果如下:

使用css的filter:blur實現圖片的模糊效果(程式碼範例)

觀察到影像模糊超出其容器的邊框,並在模糊影像和黑色邊框之間出現「發光」效果,現在我們來解決這個問題。

解決方法:

.imageContainer {
overflow: hidden;
}    
img {
+transform:scale(1.1);
}

效果如下:

使用css的filter:blur實現圖片的模糊效果(程式碼範例)


以上是使用css的filter:blur實現圖片的模糊效果(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn