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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python定时器实例代码
2017/11/01 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python返回数组的索引实例
2019/11/28 Python
如何基于线程池提升request模块效率
2020/04/18 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
Prototype如何更新局部页面
2013/03/03 面试题
关于幼儿的自我评价
2013/12/18 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
python中urllib包的网络请求教程
2022/04/19 Python