0

截图在这里。

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

谢谢！

其实我想知道苹果是如何实现这一点的。:-)

4

4 回答 4

5

background-image在html(or 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: '';
}
于 2013-06-16T19:32:44.043 回答
3

是的，我支持 Ana 的方法（我喜欢使用伪元素 - 聪明！）

值得注意的是，您可以跨浏览器制作滤镜效果，因为 CSS3 是从 SVG 派生的，而 MS 很久以前就做了自己奇怪的专有版本。你甚至可以为它制作动画。

于 2013-06-16T19:58:11.990 回答
2

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

但是，使用CSS3 过滤器属性可以实现类似的效果- 尽管此属性尚未被广泛采用。

于 2013-06-16T19:31:15.633 回答
-1

好吧，您可以使用css Opacity 属性，并将图像放在那里。Nwm，它只是被剪切然后放回的图像。

于 2013-06-16T19:03:39.940 回答