爱站程序员基地给定一个图像，如何使用CSS将图像进行模糊处理，转换为模糊图像？下面本篇文章就来给大家介绍一下使用CSS模糊处理图像的方法，希望对大家有所帮助。
在CSS中，可以使用filter属性来模糊处理图像；filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。
语法：
[code]filter: blur()
属性值：
● blur()：给图像设置高斯模糊，值越大越模糊。如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
示例１：使用filter: blur()来模糊图像
原图：
[code]<!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：创建背景模糊图像
[code]<!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中文网 ！！
