弗羅斯特模糊標題

Question

這裏是守望先鋒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職位。

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

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

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

容器