在网页中，为了提高页面的美观度和视觉效果，经常需要修改背景样式。CSS可以很好的满足这一需求，最近非常火的一个CSS效果就是把背景模糊功能。那么我们该如何通过CSS实现背景模糊呢？

首先，要使用CSS的属性filter，其中blur可以让背景模糊。根据CSS3的规范，blur属性会在指定范围内将选择器的像素模糊。具体实现方法如下：

.my-div {background-image: url('xxx.png');-webkit-filter: blur(10px);filter: blur(10px);}

上面的CSS代码中，我们通过background-image属性让DIV元素设置了一个背景图片，然后使用filter属性，将模糊值设置为10像素。

如果想要判断一下浏览器是否支持blur属性，可以通过下面的方法来兼容处理：

.my-div {background-image: url('xxx.png');-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}

这里有两个新属性-webkit-backdrop-filter和backdrop-filter，这两个属性都可以实现模糊效果。其中，-webkit-backdrop-filter是为WebKit和Safari浏览器准备的。backdrop-filter是标准属性，适用于Chrome与Firefox浏览器。两者都支持模糊值。

无论是旧浏览器还是新浏览器，把背景变得模糊的方法都不太一样。但无论哪种方式，使用CSS让背景图片变得模糊都是非常实用的一种技术。大胆尝试，一定会给你的网页带来不小的惊喜哦！