恩，我希望得到下图这种效果。
看起来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;，然后就变成这样啦↓
好玩吧哈哈哈...
扫一扫
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
