CSS秘密花园:磨砂玻璃效果_html/css_WEB-ITnose

main {    position: relative;    /* [Rest of styling] */}main::before {    content: '';    position: absolute;    top: 0; right: 0; bottom: 0; left: 0;    background: rgba(255,0,0,.5); /* for debugging */}

背景也可以是non-fixed的，只是可能会导致混乱。

我们还应用了一个半透明的 red 背景，这样我们可以看明白我们正在弄哪块内容，否则在处理透明（也就是，invisible）元素的时候调试会比较困难。如图所示:

伪元素模糊覆盖在文本的上方

我们的伪元素就在我们的内容的上方，然后将其模糊。我们可以通过添加 z-index: -1; 来把它置于元素下方。

在用负的 z-index 值来将子元素移动到它的父元素下面时要小心：如果父元素是作为背景嵌套在其它元素中，子元素也会移到其它元素下方。

利用 z-index: -1; 将伪元素移动到父元素下方

现在是时候把半透明的红色背景去掉了，用一个和我们背景相符的图片，可以复制 的背景，或者直接拆分伪元素的规则。现在我们可以模糊了吗？试一下：

body, main::before {    background: url("tiger.jpg") 0 / cover fixed;}main {    position: relative;    background: hsla(0,0%,100%,.3);}main::before {    content: '';    position: absolute;    top: 0; right: 0; bottom: 0; left: 0;    filter: blur(20px);}

为什么不直接在 main::before 中使用 background: inherit ？因为这样的话它会继承 main 的背景，而不是 body 的背景，这样伪元素得到的就只是一个半透明的白色背景。

图注：伪元素的模糊是可行的，但是在边缘处模糊较少，所以磨砂玻璃的效果也受了一点影响

如上图所示，我们差不多完成了。中间的模糊效果看起来很完美，但是在接近边缘的地方模糊比较少。这是因为模糊半径（blur radius）会减少覆盖有纯色模糊的面积。为我们的伪元素应用一个红色背景，有助于我们理解这是怎么回事。

图注：添加一个红色背景可以帮助我们理解

为了规避这个问题，我们让伪元素至少比它的容器的尺寸大 20px （和模糊半径的值相等），通过应用一个 -20px 或更小的 margin 值来让它保持在一个安全的区域内，因为不同的浏览器可能会使用不同的模糊算法。如图所示:

这修复了边缘处褪色模糊的问题，但是现在在我们的容器外边也有一些模糊，这使得它看起来像污迹而不像磨砂。幸好，这个问题也容易解决：我们只要应用为 main 应用 overflow: hidden; ，把多余的模糊剪掉即可。最后的代码如下所示：

body, main::before {    background: url("tiger.jpg") 0 / cover fixed;}main {    position: relative;    background: hsla(0,0%,100%,.3);    overflow: hidden;}main::before {    content: '';    position: absolute;    top: 0; right: 0; bottom: 0; left: 0;    filter: blur(20px);    margin: -30px;}

效果如下所示：

修复边缘处淡去的模糊，但是我们的元素外边仍然存在模糊

现在我们页面的可读性已经变得比刚开始的时候好多了，外观也非常优雅。这种效果的降级是否优雅仍值得商榷。如果不支持滤镜，我们看到的就是本节开头的那个效果。我们可以通过调整背景颜色的透明度来让降级效果的可读性更好。