.selector {
background-image: url("example.jpg");
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0; Chrome 18 - 48 */
filter: blur(5px); /* Chrome 49+, Opera 15+, Firefox 35+, Edge 12+, Safari 9.0+ */
/* 可以根据实际需要调整模糊度，最大只能到10px */
}代码中用到了 filter 属性，其中包括了一个 blur 函数，用于设置模糊程度，blur 函数后面需要紧跟一个像素值，表示模糊程度的大小，模糊程度越大就越模糊，最大值为 10px。
需要注意的是，Safari 6.0 – 9.0 和 Chrome 18 – 48 支持 -webkit-filter，而 Chrome 49+, Opera 15+, Firefox 35+, Edge 12+, Safari 9.0+ 则支持 filter，所以在编写代码时需要兼容多个浏览器，更好的做法是使用两个 filter 属性以适应不同浏览器：-webkit-filter 和 filter。
除了模糊效果，CSS3 还提供了其它三种 filter 函数：grayscale、sepia 和 saturate。下面大家来一个一个看看：
- grayscale：设置图片的灰度程度，值范围在 0 – 100 之间。值为 0 表示图片正常，值为 100 表示完全灰度。（例：-webkit-filter: grayscale(80%); filter: grayscale(80%);）
- sepia：将图像转换成深棕色的色调，值范围在 0 – 100 之间。值为 0 表示图片正常，值为 100 表示完全棕色。（例：-webkit-filter: sepia(75%); filter: sepia(75%);）
- saturate：设置图片的饱和度（鲜艳程度），值范围在 0 – 100 之间。值为 0 表示图片变成灰度图像，值为 100 表示正常的饱和度。（例：-webkit-filter: saturate(30%); filter: saturate(30%);）
最后提醒，使用 CSS3 创建特效时，要考虑兼容性和性能问题，其中兼容性问题可以使用后缀名，比如-webkit 或 -moz，但性能问题只有减少滤镜的使用次数，尽可能使用最接近的颜色来代替背景图片，使用整体渲染代替滤镜进行优化等等优化措施。