CSS 实现磨砂玻璃(毛玻璃)效果样式


Posted in HTML / CSS onMay 21, 2023

CSS 实现磨砂玻璃(毛玻璃)效果样式

要实现磨砂玻璃背景,可以使用 CSS3 中的::before伪元素和backdrop-filter属性,结合opacity属性和blur()函数来实现。

具体实现步骤如下:

  • 创建一个具有背景的元素,例如一个div元素。
div {
  background-image: url("your-image-url");
}
  • 使用::before伪元素为元素添加一个半透明的背景层。
div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

在这个示例中,设置了::before伪元素的内容为空,位置为绝对定位,宽度和高度分别为 100%,并设置了一个半透明的白色背景色。

  • 使用backdrop-filter属性对::before伪元素的背景进行模糊处理。
div::before {
  /* ... */
  backdrop-filter: blur(10px);
}

在这个示例中,使用blur()函数设置模糊程度为 10 像素。可以根据需要调整这个值来控制模糊程度。

  • 为了让磨砂玻璃效果更加明显,可以通过opacity属性降低::before伪元素的不透明度。
div::before {
  /* ... */
  opacity: 0.8;
}

在这个示例中,将::before伪元素的不透明度降低到 0.8,以增强磨砂玻璃效果。

完整的 CSS 代码如下:

div {
  background-image: url("your-image-url");
  position: relative;
}
div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  opacity: 0.8;
}

通过这种方式,可以使用 CSS 快速简单地实现磨砂玻璃背景效果。需要注意的是,backdrop-filter属性并不是所有浏览器都支持,需要进行兼容性测试和兼容性处理。

到此这篇关于CSS 实现磨砂玻璃(毛玻璃)样式的文章就介绍到这了,更多相关CSS磨砂玻璃内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 #HTML / CSS
CSS list-style-type属性使用方法
May 21 #HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 #HTML / CSS
box-shadow单边阴影的实现
VW、VH适配移动端的解决方案与常见问题
May 21 #HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 #HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
You might like
php多任务程序实例解析
2014/07/19 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python基于SMTP协议发送邮件
2019/05/31 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
研发工程师岗位职责
2014/04/28 职场文书
个人评语大全
2014/05/04 职场文书
个人求职自荐信范文
2014/06/20 职场文书
法人委托书
2014/07/31 职场文书
遗失说明具结保证书
2015/02/26 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python