冰霜模糊 header

Question

这里是《守望先锋》subreddit link https://www.reddit.com/r/Overwatch/.

有一个 header 具有 stained/frost 玻璃效果，如上图所示。我试图了解它是如何完成的。我知道它使用了两张图片：一张清晰的和一张模糊的。似乎整个事情只与 CSS 一起工作，我想重现这种效果。关于如何操作的任何提示？

Answer 1

您只需使用 CSS 模糊滤镜在图像顶部创建第二个矩形元素：

filter: blur(20px);

CSS

body, html {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 200px;
    background-image: url(http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg);
    background-position: left bottom;
}

#gloss {
    position: absolute;
    top: 100px;
    height: 100px;
    width: 100%;
}

#gloss::before {
    display: block;
    width: 100%;
    height: 100px;
    background-image: url(http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg);
    background-position: left bottom;
    -webkit-filter: blur(20px);
    content: ' ';
}

HTML

<div id="header">
    <div id="gloss"></div>
</div>

这会在下半部分产生这种光泽效果：

查看工作示例 on JSFiddle.net。

您可以查看 CSSTricks.com 以获得对此的很好解释。

Answer 2

其实很简单，就是两个div互相叠加。重要的部分是 background-position 和 top / bottom 位置。

.imgWrapper{
 position: relative;
 width:500px;
 height:91px;
}
.overlayImages{
 position: absolute;
 left: 0;
 width:100%;
 height:100%;
 background-repeat: no-repeat;
 background-size: 100%;
}
.topImg{
 top: 0;
 background-image: url("//b.thumbs.redditmedia.com/0HMyksNbyvcoEx2-35Gf151KTV_QzKa6ihNNYedlqLo.jpg");
 background-position: left top;
}

.bottomImg{
 height: 50%;
 bottom: 0;
 background-image: url("//b.thumbs.redditmedia.com/kDrC4XsFDhy6yP82_DAoDVNa0DXWgwlFGVeuED8TrNo.jpg");
 background-position: left bottom;
}

<div class="imgWrapper">
 <div  class="overlayImages topImg"></div>
 <div  class="overlayImages bottomImg"></div>
</div>

容器

冰霜模糊 header

Frost blur header

css

background

blur

css-filters