页面顶部背景图片如何设置上半部分为毛玻璃效果

时间 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;，而后就变成这样啦↓

好玩吧哈哈哈...