css毛玻璃不用背景图 |css 选择器案例

css写正圆，css弦乐有颤音，css模块化列表，css中inherit属性详解，js文件中的写css，css隔行设置每行首字颜色，css 选择器案例 css毛玻璃不用背景图 |css 选择器案例

.blur {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
}
.blur:before {
content: '';
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
background: inherit;
filter: blur(10px);
opacity: .5;
z-index: -1;
}

这里使用了伪元素:before来创建一个容器，然后用background: inherit继承父元素的背景颜色，这样就不用单独的背景图了。接下来，使用filter属性和blur滤镜制作毛玻璃效果。实际上，通过调整blur()函数的参数，大家可以实现不同层次的模糊度。

最后，设置下z-index属性来调整层级，以便它被放置在父元素的下方，看起来它就像一层半透明的薄膜。

总的来说，这个方法比使用背景图处理节省了请求和文件大小。所以，CSS毛玻璃效果不仅简单易懂，而且能增强网站性能。试试吧！