资讯专栏INFORMATION COLUMN

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

plus2047 / 3452人阅读

摘要:第二层要设置毛玻璃高度,和。要添加的背景图片实际高度为最终展示的毛玻璃高度设置为后,若不设置,由于是空的,导致为毛玻璃高度要比最终的高度大才行上移设置和是为了左右边缘也模糊度好设置模糊度在和下显示都,在中没有模糊效果,添加即可。

恩,我希望得到下图这种效果。

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

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

我为了简单省事用的三层

来写的例子。(CSS伪元素::before的写法 点我进CodePen)

HTML代码:


  

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层高度170pxbackground-position: center bottom;,这样把背景图案顶部10px丢掉了对吧,再设置blurbackground-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;的效果。为了更容易观察,我把.backgroundwidth: 100%;去掉,改为width: 800px; margin: 0 auto;,再去掉.blur-boxoverflow: hidden;,然后就变成这样啦↓

好玩吧哈哈哈...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115363.html

相关文章

  • css-secrets (css揭秘) 知识点目录,值得深入学习!

    摘要:通过模糊来弱化背景和滚动提示使用两层背景,控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧 第二章 边框与背景 半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量,////bac...

    DevWiki 评论0 收藏0

发表评论

0条评论

plus2047

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<