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

猿友 2021-03-23 17:40:09 瀏覽數 (4213)

反饋

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

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

圖片模糊處理

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

CSS模糊照片處理

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

讓我們來看下實現(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)照片模糊的全部內容。更多 CSS 效果實現(xiàn)請關注 w3cschool 官網。

相關 CSS 效果：CSS如何設置圖片旋轉、CSS如何實現(xiàn)陰影效果

CSS

0 人點贊