CSS3 图片模糊处理

说明

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

go 复制代码
filter: 函数();

例如:filter: blur(5px); 模糊处理,数值越大越模糊。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/blur

filter后面可以跟多种函数,详见:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

示例

不加模糊

例如,没有模糊之前:

加了5px的模糊

加了15px的模糊

鼠标移上去就不模糊、鼠标离开就模糊

鼠标没有移上去时显示的是模糊的:

鼠标移上去时不模糊显示:

相关推荐
其实防守也摸鱼3 分钟前
Codex 下载与本地部署实战指南
linux·服务器·前端·数据库·算法·ai
苏渡苇17 分钟前
从零搭建 Vue 3 工程化项目:Vite + TypeScript + Pinia + Element Plus 实战
前端·vue.js·typescript
keyipatience20 分钟前
CSS学习(2)|元素显示模式、盒模型、Flex 布局
javascript·css·html·css3
CallFay云起未来21 分钟前
2026年AI客服能不能减少人工回复?从知识检索到人机协同的技术实现
java·大数据·前端·人工智能·架构·文心一言
IT_陈寒23 分钟前
一文搞懂SpringBoot的核心概念
前端·人工智能·后端
棉猴34 分钟前
玩游戏学Python12-布尔型与条件语句
java·前端·python·玩游戏·游戏编程·pgzero
java_nnnn38 分钟前
Spring Web MVC 入门:从一个 URL 到 Java 后端完整处理请求
java·前端·spring boot·spring
丨白色风车丨1 小时前
LangChain Agent 从入门到实战:创建与调用参数全解析
前端·python·langchain
Jmyd01239 小时前
Web端3D营销展厅技术实现路径:从素材上云到线索回流的数据链路
前端·3d·性能优化·三维数字化
砚凝霜9 小时前
【软考信息安全】第二十二章 Web服务器安全分析与增强——Apache与IIS
服务器·前端·安全