頁面頂部背景圖片如何設置上半部分爲毛玻璃效果

時間 2019-11-09

標籤頁面頂部背景圖片如何設置上半部分爲毛玻璃效果简体版

原文原文鏈接

恩，我但願獲得下圖這種效果。
web

看起來so easy對不對，然鵝我就折騰了一下午啊心累啊...要不就是毛玻璃錯位了，要不就是毛玻璃周圍一圈模糊度很差...仔細看下面這個讓強迫症犯病的效果圖，毛玻璃上側和下側比中間會清晰點。（背景也有點錯位了..）
url

而後研究了下嗶哩嗶哩的源碼..發現仍是蠻簡單的..是的，我就是過後諸葛亮。spa

我爲了簡單省事用的三層<div>來寫的例子。（CSS僞元素::before的寫法點我進CodePen）code

HTML代碼：blog

<body>
  <div class="background">  <!-- 最大的背景圖片層 -->
    <div class="blur-box">  <!-- 用來放毛玻璃的層 -->
      <div class="blur"></div>  <!-- 用來製做毛玻璃的層 -->
    </div>
  </div>
</body>

CSS思路：第一層就是把背景圖片扔進去。第二層要設置毛玻璃高度，和overflow: hidden;。第三層的背景仍是背景圖片哦，而後加了filter: blur(5px);。這樣就行了喲。纔怪。圖片

怎麼讓毛玻璃邊緣也很模糊呢？咱們讓毛玻璃層比咱們實際須要的尺寸大，而後設置父元素overflow: hidden;去掉周圍一圈不夠模糊的就好了。腦海中能浮現出畫面嗎哈哈。get

這裏blur-box層高是42px，咱們讓blur層高62px，而後position: absolute; top: -10px;。 top: -10px;使blur層上移了10px，這樣blur層比blur-box層上面多了10px，下面多了10px，而後用blur-box層的overflow: hidden;給遮擋掉，是否是就獲得了完美的毛玻璃呢~源碼

這裏面還有一點比較關鍵，那就是毛玻璃的背景怎麼和最底層的背景重合呢？在這裏，背景圖片實際高度是180px，咱們設置background層高度170px， background-position: center bottom;，這樣把背景圖案頂部10px丟掉了對吧，再設置blur層background-position: center top;，發現沒，這個是保留了頂部10px的喲，不過注意以前已經設置過top: -10px;，這樣就也丟掉了背景圖案頂部10px，二者就重合了。it

CSS代碼。io

.background{
  width: 100%;
  height: 170px;  /*要添加的背景圖片實際高度爲180px*/
  background: url(http://i0.hdslb.com/bfs/archive/c456071489832adc92028e5ee4fc10e28350678f.jpg) no-repeat center bottom;
}
.blur-box{
  height: 42px;  /*最終展現的毛玻璃高度*/
  overflow: hidden;
  position: relative;
}
.blur{
  background: url(http://i0.hdslb.com/bfs/archive/c456071489832adc92028e5ee4fc10e28350678f.jpg) no-repeat center top;
  position: absolute;
  width: 100%; /*設置positon爲absolute後，若不設置width，因爲div是空的，致使width爲0*/
  height: 62px;  /*毛玻璃高度要比最終的高度大才行*/
  top: -10px;  /*上移10px*/
  padding: 0 20px;
  left: -20px;  /*設置paddig和left是爲了左右邊緣也模糊度好*/
  filter: blur(5px);  /*設置模糊度*/
}

在Chrome和Firefox下顯示都OK，在Opera中沒有模糊效果，.blur添加-webkit-filter: blur(5px);便可。

最後，給大家看下padding: 0 20px; left: -20px;的效果。爲了更容易觀察，我把.background的width: 100%;去掉，改成width: 800px; margin: 0 auto;，再去掉.blur-box的overflow: hidden;，而後就變成這樣啦↓

好玩吧哈哈哈...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。