- 实测图
- 示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的css实现毛玻璃效果</title>
</head>
<body>
<style type="text/css">
.blur {
filter: url(blur.svg#blur);
/* FireFox, Chrome, Opera */
-webkit-filter: blur(10px);
/* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
/* IE6~IE9 */
}
</style>
<img src="img/20180325074639843.jpg" />
<img src="img/20180325074639843.jpg" class="blur" />
</body>
</html>