首页 前端知识 CSS3 图片模糊处理

CSS3 图片模糊处理

2024-11-04 09:11:40 前端知识 前端哥 231 821 我要收藏

说明

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

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的模糊

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

鼠标没有移上去时显示的是模糊的:
在这里插入图片描述

鼠标移上去时不模糊显示:
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19846.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!