html中如何将背景图片模糊效果,CSS如何将图像转换为模糊图像？

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

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

语法：filter: blur()

属性值：

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

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

原图：

img {

-webkit-filter: blur(4px);

filter: blur(4px);

}

h1 {

color:green;

}

效果图

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

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;

}

Hello World

Blurred Background Image

效果图：

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