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伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
Python标准库之sqlite3使用实例
2014/11/25 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python实现的购物车功能示例
2018/02/11 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
flask 实现token机制的示例代码
2019/11/07 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python中的全局变量如何理解
2020/06/04 Python
小学生元旦感言
2014/02/26 职场文书
高中生职业规划范文
2014/03/09 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
索赔员岗位职责
2015/02/15 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript
Ruby处理CSV数据方法详解
2022/04/18 Ruby