css实现毛玻璃效果——backdrop-filter
css实现毛玻璃效果
毛玻璃效果
毛玻璃效果有朦胧美,很适合在以图片为底的文字展示。
用PS比较容易实现毛玻璃效果,网上也有很多教程。但是切图的方法总归有些限制,有局限性,不如直接用代码实现灵活。
在百度里搜索,扑面而来的好多都是使用 filter: blur()
+ background-attachment
属性 方法实现,个人觉得其实 backdrop-filter
属性更方便,代码量更少,也很好理解。
实际上,MDN上也是使用 backdrop-filter
属性实现的毛玻璃效果。
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)
参考网址——MDN Web Docs
filter方法
准备——首先给盒子背景图片:
.box{background: url('./img/bg1.jpg');background-repeat: no-repeat;background-size: cover;background-position: center center;/* p居中 */display: flex;align-items: center;justify-content: center;
}
之后需要给里面的文字框一个透明背景:
.box p{padding: 80px 60px;border-radius: 12px;background-color: rgba(255,255,255,.2);
}
接着实现毛玻璃效果,由于直接给p
加上模糊效果会导致上面的文字也会变模糊不清。
所以需要曲线救国,给p标签的伪元素加模糊,但是又会导致看不见后面的图片背景。
所以又需要给伪元素加上背景图片。
.box p{padding: 80px 60px;font-size: 24px;border-radius: 12px;background-color: rgba(255,255,255,.2);position: relative;overflow: hidden;
}
.box p::before{content: '';// 伪元素大小与父元素一致position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(255,255,255,.5);background: url('./img/bg1.jpg');background-position: center center;background-repeat: no-repeat;background-size: cover;
}
之后为了让伪元素位于父元素下方,需要给p标签加上z-index: 1
,伪元素加上z-index: -1;
但又会发现伪元素内的图片与后面的图片不一致,有需要给伪元素加上background-attachment: fixed;
属性才可。
之后给伪元素加上模糊:
filter: blur(10px);
-webkit-filter: blur(10px);
至此,实现模糊效果;你会发现这种方法太复杂,代码量大,考虑的因素多。
所以推荐下面这种方法:
backdrop-filter方法
这种方法是我在浏览MDN官网时发现的,官网上的示例就是backdrop-filte
属性实现玻璃效果。-MDN:backdrop-filte
首先,给盒子加个图片,p标签加个透明背景。
.container{width: 400px;height: 400px;background: url('./img/bg1.jpg');background-repeat: no-repeat;background-size: cover;background-position: center center;/* p居中 */display: flex;align-items: center;justify-content: center;
}
.container p{padding: 40px 30px;font-size: 24px;border-radius: 12px;background-color: rgba(255,255,255,.2);
}
之后给p标签加个backdrop-filter: blur(15px);属性即可实现玻璃模糊效果!
加个投影效果会更好:
.container{width: 400px;height: 400px;background: url('./img/bg1.jpg');background-repeat: no-repeat;background-size: cover;background-position: center center;/* p居中 */display: flex;align-items: center;justify-content: center;
}
.container p{padding: 40px 30px;font-size: 24px;border-radius: 12px;background-color: rgba(255,255,255,.2);backdrop-filter: blur(15px);box-shadow: 0 0 10px #333;
}
css实现毛玻璃效果——backdrop-filter相关推荐
- UI妹子说我用CSS实现毛玻璃效果的样子很帅
前言 UI小姐姐问我,能不能做出透明加模糊的背景,而我当然是二话不说就说可以.因为我觉得没有什么是css实现不了的.更何况我要在她面前展现得我很厉害的样子. 开发起来 果不其然,在我打开蓝湖后,发现属 ...
- 纯css实现毛玻璃效果
2019独角兽企业重金招聘Python工程师标准>>> 最近有用到毛玻璃效果,在此记录,一方面方便以后使用,另一方面也分享给其他朋友. 先上图: 通过对比,就可以看到效果还是很不错, ...
- css实现毛玻璃效果
首先我们要知道实现毛玻璃效果的关键点:filter滤镜 html代码 <div class="main"></div> 先写一个居中的div,并给body加 ...
- 自学前端之CSS实现毛玻璃效果
我们知道,页面中有一种非常好看的效果就是毛玻璃,我们先看一下效果图 接下来我们就具体实现一下这个效果 先看HTML 在body中设置一张背景图片 然后设置一个div,用来作为卡片,也是我们需要的毛玻璃 ...
- css 实现毛玻璃效果
前言 最近在参加一个项目的时候,需要实现毛玻璃的效果,一开始想简单的使用背景透明度rgba或者filter:blur,来实现. 遇到问题: 1.只使用透明度不能准确的实现毛玻璃的效果. 2.如果单独的 ...
- 一行CSS实现毛玻璃效果
想要iOS上的那种毛玻璃设计,在百度搜索的前几排回答,实现效果实在是太复杂,而且不完美. 不完美之处是,百度的回答是将after伪元素设置背景图片后在虚化,这样的话不是背景图片不就虚化不了了吗?? 还 ...
- CSS揭秘——毛玻璃效果
为了方便把CSS写在一起了:点击测试 例子 <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 关于css实现毛玻璃效果
参考: https://www.cnblogs.com/ghost-xyx/p/5677168.html 人家的效果图: https://darylxyx.github.io/Demo/blur 如果 ...
- 【css】毛玻璃效果,背景高斯模糊
关键属性:backdrop-filter 参考了Apple 官网,参数与 Apple 官网一致 // 背景高斯模糊 @supports (-webkit-backdrop-filter: satura ...
- php毛玻璃,使用css怎么实现毛玻璃效果?
使用css怎么实现毛玻璃效果?下面本篇文章给大家介绍一下使用css实现毛玻璃效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 其实毛玻璃的模糊效果技术上比较简单,只是用到了 ...
最新文章
- CSS 最核心的几个概念
- CentOS系统安装桌面
- 最短网络 Agri-Net
- uniapp h5页面 在移动端 使用clipboardone.js插件实现 写入剪切板 -- 安卓和ios安美适配(仅测试部分机型)
- Hibernate缓存 - 第一级缓存
- Oracle中的不等于号
- sparkTransformation算子
- Docker和K8S对比
- SI4438可变长包数据收发
- MVC 下 JsonResult 的使用方法(JsonRequestBehavior.AllowGet)
- vb.net word 自定义工具栏_20个Word文字处理快速掌握技巧
- 当析构函数遇到多线程 转载
- java 怎么写异步方法_java如何学习异步编程?
- Window 开机连接ocsp.globalsign.com
- 微信小程序安卓视频播放卡顿问题
- vue+websokect实现实时聊天,可单聊、可群聊(一)
- Tobii Studio眼动仪教程 - 真正的测谎机器
- 空间直角坐标系与大地坐标系坐标的转换(mfc)
- linux路由器文件目录,路由器挂载U盘文件和文件夹删除不掉,linux系统强制删除文件和文件夹命令...
- 安装MikTex时候出现“指定安装路径不是空的”(“The specified installation directory is not empty”)提示的解决办法
热门文章
- matlab怎么启动一个图形窗,Matlab在一个图形窗口里画多个图形的操作教程
- MATLAB椎体怎么画,最适合小白的matlab教程系列,进阶,一
- 好多粉数据上报之360点睛平台ocpc API上报数据方法
- long tail(长尾理论)
- 使用netwox实现tcp rst 攻击及防御措施
- 助力NBA复赛背后,NBA与可穿戴设备的纠葛缠斗
- window中的DLL和linux中的os文件是什么东西
- The APR based Apache Tomcat Native library which allows optimal performance in......
- 2017 携程 笔试编程题 1
- 计算机中英字幕精品教程合集