apple.com上的“磨砂玻璃效果”是如何实现的？

Question

Screenshot就在这里。

---

这是用css3还是其他技术实现的？怎么样？

谢谢！

---

其实我想知道APPLE是如何实现这一点的。 ： - ）

Answer 1

在background-image（或html）元素上使用相同的body，在{2}上使用:before伪元素作为底部栏，background-position: 50% 100%为伪元素应用模糊过滤器。至少我就是这样做的。

demo

（仅限WebKit）

相关的 HTML ：

<div class='bar'></div>

相关的 CSS ：

html, .bar:before {
  height: 100%;
  background: black url(image.jpg) no-repeat 50% 100%;
}
.bar {
  position: fixed;
  right: 0; bottom: 0; left: 0;
  height: 5em;
}
.bar:before {
  position: absolute;
  z-index: -1;
  top: 0; right: 0; left: 0;
  -webkit-filter: blur(5px);
  content: '';
}

Answer 2

是的，我和Ana一起接近（我喜欢使用伪元素 - 聪明！）

值得注意的是you can make the filter effect cross-browser，因为CSS3源自SVG，而MS在很久以前就做了他们自己奇怪的专有版本。 You can even animate it.

Answer 3

在该特定页面上，Apple通过使用已模糊且不透明的背景图像副本来实现此效果。

然而，使用CSS3 filter property可以达到类似的效果 - 虽然这个属性尚未被广泛采用。

Answer 4

嗯，你可以使用css Opacity属性，并将图像放在那里.Nwm，它只是被剪切然后再推回的图像。