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

恩，我希望得到下图这种效果。
毛玻璃啊毛玻璃

看起来so easy对不对，然鹅我就折腾了一下午啊心累啊...要不就是毛玻璃错位了，要不就是毛玻璃周围一圈模糊度不好...仔细看下面这个让强迫症犯病的效果图，毛玻璃上侧和下侧比中间会清晰点。（背景也有点错位了..）
你犯强迫症了吗

然后研究了下哔哩哔哩的源码..发现还是蛮简单的..是的，我就是事后诸葛亮。

我为了简单省事用的三层<div>来写的例子。（CSS伪元素::before的写法点我进CodePen）

HTML代码：

<body>
  <div class="background">  <!-- 最大的背景图片层 -->
    <div class="blur-box">  <!-- 用来放毛玻璃的层 -->
      <div class="blur"></div>  <!-- 用来制作毛玻璃的层 -->
    </div>
  </div>
</body>

CSS思路：第一层就是把背景图片扔进去。第二层要设置毛玻璃高度，和overflow: hidden;。第三层的背景还是背景图片哦，然后加了filter: blur(5px);。这样就好了哟。才怪。

怎么让毛玻璃边缘也很模糊呢？我们让毛玻璃层比我们实际需要的尺寸大，然后设置父元素overflow: hidden;去掉周围一圈不够模糊的就行了。脑海中能浮现出画面吗哈哈。

这里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，两者就重合了。

CSS代码。

.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;，然后就变成这样啦↓
啦啦啦

好玩吧哈哈哈...