css背景模糊化
2024-10-20 20:35:34
处理背景模糊化
在css中,可以利用filter属性和blur()函数实现高斯模糊效果,filter属性用于设置图片元素的可视效果,配合blur()函数使用可给图片元素添加高斯模糊效果,语法为“图片元素{filter:blur(模糊值);}”。
我们可以通过filter滤镜属性来给图片设置高斯模糊,filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
当属性值为blur(px)时,给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;
如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta Http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.img1 {
/* 重点设置下面两个属性 */
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(5px);
filter: blur(5px);
}
</style>
<img src="https://www.lsjlt.com/skin/default/image/lazy.gif" class="lazy" data-original=""1118.02.png" class="img1">
<img src="1118.02.png"" class="img2">
</body>
</html>
输出结果:
最新文章
- Microsoft Visual Studio 工程属性表props/vsprops创建与使用
- EXT 下拉框事件
- Python黑帽编程2.2 数值类型
- supervisor(一)基础篇
- Graph database_neo4j 底层存储结构分析(4)
- java写的web服务器
- 如何制作带MFC界面的MFC DLL
- Codeforces Round #333 DIV2
- python Day 2 - 编写数据库模块
- 较详细的sqlserver数据库备份、恢复(转)
- Animate.css 教程
- 浙江大学PAT上机题解析之3-04. 一元多项式的乘法与加法运算
- createElement创建
- laravel 邮箱改密功能
- 把vux中的@font-face为base64格式的字体信息解码成可用的字体文件
- 初学Python——协程
- pgsql事务与并发控制
- coreseek/sphinx中的匹配模式
- 前端 CSS预处理器Less
- 利用cgi编程实现web版man手册
热门文章
- CSP-J初赛知识点
- dvgis计算两点间距离的问题
- go 神奇的错误 time.Now().Format(";2006-01-02 13:04:05";) 比北京时间大8小时
- 代码随想录算法训练营day14 | leetcode 层序遍历 226.翻转二叉树 101.对称二叉树 2
- CentOS 搭建 samba 服务器并通过 Windows 访问
- Linux 用户组管理
- Hugging Face 每周速递: Space 支持创建模版应用、Hub 搜索功能增强、BioGPT-Large 还有更多
- Vitis-AI之docker指南
- SQL Server迁移数据库文件(ldf&;amp;mdf文件)到其他盘
- pycharm软件基本使用python语法的注释变量的使用常量的使用变量的命名规范python的优化垃圾回收机制数据类型