霜模糊头

Question

这是Overwatch的subreddit链接 https://www.reddit.com/r/Overwatch/

有一个带有染色/霜冻玻璃效果的标题，如上图所示。我试着了解它是如何完成的。我知道它使用2张图像：清晰而模糊的图像。似乎整个事情只适用于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位置。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

容器