[注解] [404] 毛玻璃效果 #57

花絮与注解

第 102 页 · 最后一段

为了补偿这种情况，我们需要让伪元素相对其宿主元素的尺寸再向外扩大至少 20px（即它的模糊半径），我们可以通过 -20px 的外边距来达到目的，由于不同浏览器的模糊算法可能存在差异，用一个更大的绝对值（比如 -30px）会更保险一些……

书中采用 margin: -30px 来实现伪元素向外扩张的效果。当然我们也可以换用另一种方法，把 top、left、right、bottom 的值都设置为 -30px，效果是一样的。

但显然还是用 margin 比较优雅，它的简写语法一个顶四个，改起来也方便。

第 101 页 ‧ 代码块

body, main::before {
	background: url("tiger.jpg") 0 / cover fixed;
}

注意这里 background 的值。其中：

• cover 是 background-size 的值。它会自动拉伸背景图像，确保背景图像刚好覆盖整个 “容器”。

• fixed 是 background-attachment 的值。它在这里的作用是让背景图像对齐到整个视口，也就是把整个视口（而不是元素自身）作为背景图像显示的 “容器”。

这两个属性同时作用，就可以让伪元素（main::before）显示出的背景图像正好等于大背景（body）的中间那一部分，做到书中所述的 “无缝匹配”。

第 99 页 ‧ 最后一段

借助 blur() 滤镜，我们在 CSS 中获得了对元素进行模糊处理的能力……

书中实现毛玻璃效果的手法相当繁琐，因为在写书时，CSS 只有 filter: blur() 滤镜可用。

在翻译本书时，Safari 9（iOS 9）已经率先支持了 backdrop-filter 属性。这个属性直接对元素的背层应用滤镜，可以轻而易举地实现本节的毛玻璃效果。

需要注意的是，backdrop-filter 属性仅处于 ED 阶段，在 Safari 中还需要加前缀使用。不过也别担心，由于这个属性是刚性需求，我认为它被标准化只是时间问题。如果你的项目需要它来实现一些锦上添化的效果，不妨大胆用吧！