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

plus2047 发布于2019-08-30 13:11 / 3292人阅读

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

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

看起来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层高度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;，然后就变成这样啦↓

好玩吧哈哈哈...

服务器托管混合云图片毛玻璃效果 Android毛玻璃效果 asp设置页面背景页面顶部

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

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

Android酷炫动画效果

摘要：高级特效之酷炫抢红包金币下落动画最近项目需求要求做一个抢红包特效。使用动画让页面跳转更炫酷中引入了很多炫酷的动画效果，便是其中一种。 Android自定义View：一个精致的打钩小动画一个精致的打钩动画。 Android 自定义水平进度条圆角进度项目中实现进度条进度过程中显示圆角样式 ViewPager系列之仿魅族应用的广告BannerView 前言 Banner广告位是APP ...

scq000 2019-06-25 11:48 评论0 收藏0
IOS状态栏和导航栏的控制问题

摘要：原文状态栏和导航栏的控制问题的项目多数会遇到控制状态栏和导航栏的问题，比如隐藏状态栏控制状态栏的文字颜色等，导航栏也有同样需求。原文：IOS状态栏和导航栏的控制问题 IOS的项目多数会遇到控制状态栏和导航栏的问题，比如隐藏状态栏、控制状态栏的文字颜色等，导航栏也有同样需求。本文总结一下操作方法。首先一点，IOS的界面分为状态栏和导航栏，状态栏是指显示电池、时间的最顶部的一个窄条，高...

PrototypeZ 2019-06-25 14:32 评论0 收藏0
微信6.0版的一些设计细节

摘要：小视频的下拉背景可能有些人发现了，就是激活小视频下拉的时候，那个背景是摄像头获取画面后毛玻璃效果后的画面。原文链接：http://qilei.org/2014/sweet-designs-in-weixin-6/ 更新微信6.0已经有一周时间了相信大部分人关心的是小视频功能，以及底部tab配色等显而易见的变化。不过既然是大版本，还是有很多微小的变化耐人寻味。顶部条新增毛玻...

LeoHsiun 2019-06-25 14:00 评论0 收藏0
iOS开发中的实用功能

摘要：嵌套的滑动冲突解决方案虽然苹果建议我们不要嵌套，但是这话到底是对开发者说的，架不住设计师就是要这么画设计图。在线音频流播放这是一篇关于在线音频播放的文章，参考自苹果的。在移植到后，可以通过播放上面的音频，实现在线播放音频的功能。嵌套UIScrollview的滑动冲突解决方案虽然苹果建议我们不要嵌套 UIScrollview ，但是这话到底是对开发者说的，架不住设计师就是要这么画设计...

yeooo 2019-06-25 16:33 评论0 收藏0
css-secrets (css揭秘) 知识点目录，值得深入学习！

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

DevWiki 2019-08-30 15:56 评论0 收藏0