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

Question

屏幕截图在这里.

---

这是用css3还是其他技术实现的？如何？

谢谢!

---

其实我想知道APPLE是如何实现这一点的.:-)

Answer 1

background-image在html(或body)元素上使用相同的:before元素,在底部条上使用伪元素background-position: 50% 100%,然后对伪元素应用模糊过滤器.至少我就是这样做的.

演示

(仅限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: '';
}