在css中,可以使用filter属性来模糊处理图像;filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。

语法:

filter: blur()

属性值:

● blur():给图像设置高斯模糊,值越大越模糊。如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。

 

示例1:使用filter: blur()来模糊图像

原图:

CSS如何将图像转换为模糊图像?

<!DOCTYPE html> 
<html> 
	<head> 
	   	<meta charset="UTF-8">
	   	<style>  
            img {  
                -webkit-filter: blur(4px);  
                filter: blur(4px);  
            }  
            h1 {  
                color:green;  
            }  
        </style>
	</head> 
<body> 
    <center>  
        <img src= "1.jpg" width="500px" alt="filter applied" />  
        </center>  
    </body>  
</html>

效果图

CSS如何将图像转换为模糊图像?

豌豆资源搜索网站https://55wd.com 广州vi设计公司http://www.maiqicn.com

示例2:创建背景模糊图像

<!DOCTYPE html> 
<html> 
	<head> 
	   	<meta charset="UTF-8">
	   	<style>  
            img {  
                -webkit-filter: blur(4px);  
                filter: blur(4px);  
                margin-top: 20px;
            }  
            h1 {  
                color:red;  
            }  
            .backgr-text { 
                position: absolute; 
                top: 20%; 
                left: 50%; 
                transform: translate(-50%, -50%); 
                text-align: center; 
            }  
        </style>
	</head> 
<body> 
    <center>  
        <img src= "1.jpg" width="500px" alt="filter applied" />  
        <div> 
                <h1>Hello World</h1> 
                <h2>Blurred Background Image</h2> 
            </div>
        </center>  
    </body>  
</html>

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-11-09
  • 2021-07-01
  • 2021-06-01
  • 2021-10-27
  • 2021-07-16
  • 2021-12-27
猜你喜欢
  • 2022-12-23
  • 2021-09-05
  • 2021-09-02
  • 2021-11-19
  • 2022-02-08
  • 2021-08-14
  • 2021-11-01
相关资源
相似解决方案