本文主要是介绍使用css的blur制作毛玻璃效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在css中可以利用filter的blur属性来实现毛玻璃的效果，让背景看起来模糊，类似于毛玻璃的效果。
1、效果图如下：
2、代码如下：
<!DOCTYPE html>
<html class="no-js"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href=""><style>.bg {width: 300px;height: 600px;position: relative;}.outer {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('./bg.jpg') no-repeat;-webkit-filter: blur(8px); //实现毛玻璃filter: blur(8px);}.inner {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.39);font-size: 60px;color: #fff;}</style>
</head><body><div class="bg"><div class="outer"></div><div class="inner">test</div></div>
</body></html>记得blur不可以作用在有内容的父元素上，会将子元素都模糊化，如果不想要周边的阴影，可以在父元素上加overflow:hidden；
这篇关于使用css的blur制作毛玻璃效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
