How does CSS achieve photo blur?

May 29, 2021 Article blog

Photo obfuscation is often used when developing Web pages, such as blurring our background map, and when we don't want the background image to be too prominent and aesthetically pleasing, you can set up a blurring of the photo to highlight the text section. S o how does CSS achieve photo blur? This article w3cschool editor-in-chief tells you.

Let's start with the original image:

How does CSS achieve photo blur?1

Let's look at the results:

How does CSS achieve photo blur?2

The image above is blurred with the naked eye and highlights the text. I n fact, the implementation of photo obfuscation is very simple. T his can be achieved with just one code style. T hat's filter: blur(模糊数值) O f course, to achieve compatibility, you need to use -webkit-filter: blur(模糊数值)。

Let's look at the implementation code:

<!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>

Here's how CSS does all the fuzzy content for photos. For more CSS effect implementations, follow the w3cschool website.

How does CSS achieve photo blur?

Cookie Consent