App下載

CSS如何實現(xiàn)照片模糊？

猿友 2021-03-23 17:40:09 瀏覽數(shù) (4202)
反饋

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

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

圖片模糊處理

讓我們再來看下實現(xiàn)效果：

CSS模糊照片處理

以上圖片肉眼可見的被模糊了，而且可以突出文字。其實照片模糊處理的實現(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)陰影效果

CSS

0 人點贊