使用CSS将图像进行模糊处理

最新推荐文章于 2024-05-22 09:30:33 发布

qq_43067585

最新推荐文章于 2024-05-22 09:30:33 发布

阅读量3.7k

点赞数 1

分类专栏： CSS 文章标签： css 前端

原文链接：https://www.html.cn/qa/css3/10340.html

版权

CSS 专栏收录该内容

29 篇文章 4 订阅

订阅专栏

给定一个图像，如何使用CSS将图像进行模糊处理，转换为模糊图像？下面本篇文章就来给大家介绍一下使用CSS模糊处理图像的方法，希望对大家有所帮助。

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

语法：

filter: blur()

属性值：

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

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

原图：

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

效果图

示例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 class="backgr-text"> 
                <h1>Hello World</h1> 
                <h2>Blurred Background Image</h2> 
            </div>
        </center>  
    </body>  
</html>

效果图：

更多web前端开发知识，请查阅 HTML中文网！！

qq_43067585

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用CSS将图像进行模糊处理

给定一个图像，如何使用CSS将图像进行模糊处理，转换为模糊图像？下面本篇文章就来给大家介绍一下使用CSS模糊处理图像的方法，希望对大家有所帮助。在CSS中，可以使用filter属性来模糊处理图像；filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。语法：filter: blur()属性值：●　blur()：给图像设置高斯模糊，值越大越模糊。如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。示例１：使用filter: blur()来
复制链接

扫一扫

专栏目录