php毛玻璃,CSS实现毛玻璃透明效果
其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。
比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜:.content {
background-color: rgba(0,0,0,0.3);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
可是生成的效果却是下面这样:
从这个失败的例子我们得到两个结论:对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。
先解决第一个问题:
多一个层级的方法不通过添加元素,而通过伪元素。.content {
z-index: 1;
}
.content:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,0.8);
z-index: -1;
}
这里有两点需要注意,由于伪元素不能通过width:100%和height:100%来继承宿主元素的尺寸,所以通过上述方式来继承content的尺寸;为了使伪元素位于content的下面这里给其设置z-index:-1,为不使其隐藏到背景图的后面,这里给content设置z-index:1。
效果:
接下来给content::after设置相同的背景图。
如上图,即使我们设置了相同的background-postion与background-size,中间部分的图和大背景还是没有拼接成功。
解决这个问题的方法很简单,只需要添加background-attachment: fixed属性,之后为其进行模糊处理。.content {
background-position: center top;
background-size: cover;
}
.content::after {
background-image: url(xxx.jpg);
background-position: center top;
background-size: cover;
background-attachment: fixed;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
}
可以看到基本得到了我们想要的效果,美中不足的是在元素的边缘模糊的效果减弱了。为了解决这个问题,我们将伪元素的范围扩大一些,同时为了效果不超出content的范围,给其设置overflow:hidden属性。.content {
overflow: hidden;
}
.content::after {
margin: -30px;
}
这样一个比较完美的毛玻璃效果就完成了,无论你如何改变浏览器窗口的尺寸,content部分的背景图都能很好的与背景拼接,这都归功于background-attachment属性。
本文由 言浅 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Aug 19, 2018 at 08:09 pm
php毛玻璃,CSS实现毛玻璃透明效果相关推荐
- CSS设置背景透明效果
CSS设置背景透明效果 设置背景透明效果有两种方法: 使用opacity属性定义透明度,范围0-1,0表示完全透明,1表示不透明,优点:可以在背景图片以及背景颜色上使用.缺点:会把设置div及其子元素 ...
- css实现html透明效果
CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性filter来实现的,所以HTML元素的透明效果已经 ...
- CSS定义通用透明效果
分别定义各种浏览器的透明效果: .transparent{filter:alpha(opacity=12);-moz-opacity:0.12;opacity:0.12;background-colo ...
- css图片渐变透明效果
其实不是透明 而是图片渐渐向背景色靠齐 这里我们以白色为例 话不多说 我们直接上代码 <!DOCTYPE html> <html><head><title&g ...
- html div标签如何让其有透明效果,css实现div层透明毛玻璃
css 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.可是要作一个好的毛玻璃效果,须要注意不少细节.git 好比咱们须要将上图中页面中间的文字区域变 ...
- html 图片透明字不透明,CSS实现背景图片透明,文字不透明效果的两种方法
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
- 【前端】CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
- CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
- [css] rgba()和opacity这两个的透明效果有什么区别呢?
[css] rgba()和opacity这两个的透明效果有什么区别呢? 1.opacity 是属性,rgba()是函数,计算之后是个属性值: 2.opacity 作用于元素和元素的内容,内容会继承元素 ...
最新文章
- Java项目:精美网上音乐平台(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
- python解析雷达数据_【学习笔记】使用python带时间戳提取rosbag中的图像和雷达数据...
- python phpstudy_Java、python及phpstudy的环境配置
- 拿着锤子找钉子,数字芯片领导者比特大陆进军人工智能
- 【经典回放】多种语言系列数据结构算法:数组
- 从工程师的角度审视 Web 3,没有任何炒作
- 算法1(输出字符串的所有组合形式,例如 string s=abc 输出所有形式 a,b,c,ab,bc,abc 可以与顺序无关)...
- 优雅的使用Python之软件管理
- 一本shell编程书籍上的有bug的shell程序,看谁能找出问题所在。
- Kali Linux镜像安装(1)
- 离线安装SilverLight
- Android 仿淘宝首页界面
- AutoUpdater 实现一个简易的自动升级工具
- 帆软报表参数传给网络报表_统计图表FineReport中程序数据集传参使用解决方案...
- 买富勒鼠标的请注意了
- 6个理由告诉你为什么要用NAS
- 了解HTML标记语言
- 5种AI编程语言优缺点比较,谁才是程序员心中的白月光
- 如何将cgs2000的数据匹配到天地图坐标脱密的数据上
- 解决IIS管理器的网站可访问但ftp无法访问的问题
热门文章
- mysql collate
- C语言执行Linux的shell命令并获得返回值
- 【原】聊聊js代码异常监控
- Stanford CoreNLP 3.6.0 中文指代消解模块调用失败的解决方案
- 【报告分享】中国隐私计算产业发展报告(2020-2021).pdf(附下载连恶疾)
- 【实践】飞猪交通个性化搜索推荐技术的实践与创新(附PPT下载链接)
- 个性化推荐认知之----数字化转型浪潮下,产品经理应如何重新认知个性化推荐?...
- 只怪自己当时年纪太小,一心只看那只泼猴了
- 鹅厂算法大神干货实录,初赛通关“秘籍”还不赶快来GET!
- 机器学习-吴恩达-笔记-6-应用机器学习的建议