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>
<h1>Hello World</h1>
<h2>Blurred Background Image</h2>
</div>
</center>
</body>
</html>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
