在開發網頁時，照片模糊處理會經常被使用，比如當我們背景圖的模糊，當我們不想背景圖片過于突出影響美觀時，就可以設置將照片模糊處理，突出文字部分。那么 CSS 如何實現照片模糊呢？這篇文章 w3cschool 小編告訴你。

首先讓我們先來看下原圖：

讓我們再來看下實現效果：

以上圖片肉眼可見的被模糊了，而且可以突出文字。其實照片模糊處理的實現十分簡單。僅用一個代碼樣式就可以實現。那就是?filter:?blur(模糊數值)?。當然，要實現兼容性的話需要就得使用?-webkit-filter:?blur(模糊數值)。

讓我們來看下實現的代碼：

圖片模糊 - 編程獅(w3cschool.cn)

img {

-webkit-filter: blur(3px); /*兼容性*/

filter: blur(3px); /*模糊效果*/

margin-top: 10px;

}

h1 {

color:#EBEDEF;

}

.text {

position: absolute;

top: 30%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

}

w3cschool-編程獅

這是一張被模糊的照片

以上就是 CSS 如何實現照片模糊的全部內容。更多 CSS 效果實現請關注 w3cschool 官網。

總結

以上是生活随笔為你收集整理的html设置照片模糊效果,CSS如何实现照片模糊？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。