让背景出现毛玻璃的效果

一 .最近做一个项目，UI的一个需求是：

1.背景是半透明的
2.背景有毛玻璃的模糊效果
3.上面的字体清晰可见
效果如下：

二 . 我说这个简单，不就是背景用blur处理一下嘛，简单。

先是背景透明，字体清晰可见

div{background:rgba(51, 51, 51, .6);
}

再来个模糊处理

div{background:rgba(51, 51, 51, .6);-webkit-filter: blur(10px);-moz-filter: blur(10px);-ms-filter: blur(10px);    filter: blur(10px);
}

还做了兼容处理，美滋滋。
打开浏览器刷新：

我擦，这都是什么鬼。不行，要分析一下。

原来div里面的字和div是在一个盒子里面，设置这个盒子为模糊，那么里面的字一起都会被设为模糊。所以，我们可以通过以下方法：

要设置模糊背景的地方通过伪元素设置背景颜色，区域relative定位，伪元素absolute定位，这样让伪元素的大小完全等于本来区域的大小然后用blur滤镜进行模糊处理，再设置伪元素z-index为 -1，置于最底层，就OK啦。

div{position: relative;background:rgba(51, 51, 51, .6);-webkit-filter: blur(10px);-moz-filter: blur(10px);-ms-filter: blur(10px);    filter: blur(10px);
}
div::before {position: absolute;z-index: -1;background:rgba(51, 51, 51, .6);top: 0;right: 0;bottom: 0;left: 0;content: '';filter: blur(10px);}

这样就得到了第一张图的效果。

感谢他的思路。

让背景出现毛玻璃的效果相关推荐

使用CSS3滤镜开发模糊背景（毛玻璃）效果
效果展示: 功能说明: 在平时的开发中我们时常需要弹出某些对话框,同时希望用户能够忽略背景把注意力集中到弹框上,这时候从用户体验的角度出发,我们可以选择将弹框背景模糊化,用以增强用户的实际体验效果. ...
css背景图毛玻璃,css实现背景图片的毛玻璃效果
问题一css 一.简述问题html 最近在作登陆页面的时候,遇到了一个问题:将登陆页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料.web 二.问题解决svg .blur { filte ...
【CSS】页面背景的毛玻璃效果
前言:最近学习到了一种超级好看,超级高级的背景设计效果,迫不及待的分享出来了适用情况:用图片做背景时,将弹框和背景融为一体一.基础设计(之前的实现方法) 页面很简单,在外层的div定义backgr ...
深度linux系统任务栏毛玻璃,操作系统中常见的「毛玻璃」效果是怎么设计出来的？...
原标题:操作系统中常见的「毛玻璃」效果是怎么设计出来的? Matrix 首页推荐 Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考.我们会不定期挑选 Matrix ...
html怎么制作固定背景,使用CSS制作的页面背景固定和滚动效果
HTML HTML结构很简单,一个class为.cd-fixed-bg的div元素用于放置固定背景图,一个class为.cd-scrolling-bg的div元素用于滚动的部分.我们可以放置多个.cd ...
【转】C#使用GDI+制作背景颜色淡入淡出效果的按钮
C#使用GDI+制作背景颜色淡入淡出效果的按钮 2010-04-14 来自:CNBLOG 字体大小:[大中小] 摘要:本文介绍C#使用GDI+制作背景颜色淡入淡出效果的按钮,并提供完整的示例和 ...
android毛玻璃壁纸效果,【手机教程大赛】制作毛玻璃效果壁纸
本帖最后由青山抹微雲于 2014-9-28 17:05 编辑现在的手机系统里,对于桌面图标的设计都偏向于扁平化设计,并且受到广大机友的深爱.但是,机友们有没有发现,壁纸和图标有时候会显得混乱?看 ...
iOS开发-简单图片背景替换实现抠图效果
之前好奇, 想实现这样的功能 -----> iOS图像处理-(jpg去除白色背景) 把一张图片(.jpg)的白色背景抠掉,转成.png 格式的有alpha通道的透明图. 原图黑白分明, 像这 ...
iOS开发-简单图片背景替换(实现抠图效果)
之前好奇, 想实现这样的功能 -----> iOS图像处理-(jpg去除白色背景) 把一张图片(.jpg)的白色背景抠掉,转成.png 格式的有alpha通道的透明图. 原图黑白分明, 像这 ...

让背景出现毛玻璃的效果

一 .最近做一个项目，UI的一个需求是：

二 . 我说这个简单，不就是背景用blur处理一下嘛，简单。

让背景出现毛玻璃的效果相关推荐

最新文章

热门文章