在開發(fā)網(wǎng)頁時，照片模糊處理會經(jīng)常被使用，比如當(dāng)我們背景圖的模糊，當(dāng)我們不想背景圖片過于突出影響美觀時，就可以設(shè)置將照片模糊處理，突出文字部分。那么 CSS 如何實現(xiàn)照片模糊呢？這篇文章 w3cschool 小編告訴你。
首先讓我們先來看下原圖：
讓我們再來看下實現(xiàn)效果：
以上圖片肉眼可見的被模糊了，而且可以突出文字。其實照片模糊處理的實現(xiàn)十分簡單。僅用一個代碼樣式就可以實現(xiàn)。那就是?filter: blur(模糊數(shù)值)?。當(dāng)然，要實現(xiàn)兼容性的話需要就得使用?-webkit-filter: blur(模糊數(shù)值)。
讓我們來看下實現(xiàn)的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片模糊 - 編程獅(w3cschool.cn)</title>
<style>
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;
}
</style>
</head>
<body>
<center>
<img src= "./image/sunset.jpg" width="500px" alt="sunset" />
<div class="text">
<h1>w3cschool-編程獅</h1>
<h2>這是一張被模糊的照片</h2>
</div>
</center>
</body>
</html>以上就是 CSS 如何實現(xiàn)照片模糊的全部內(nèi)容。更多 CSS 效果實現(xiàn)請關(guān)注 w3cschool 官網(wǎng)。
相關(guān) CSS 效果：CSS如何設(shè)置圖片旋轉(zhuǎn)、CSS如何實現(xiàn)陰影效果
