CSS改变图片颜色的filter(滤镜)属性
最新回答
快乐很简单
2026-07-11 01:29:07
首先，none作为默认值，不改变图片效果。
接着，blur()利用高斯模糊效果，例如设置为blur(2px)可以使图片呈现出柔和的模糊感。
利用brightness()，可以线性调整图片的亮度，如brightness(50%)将图片调暗至半透明状态。
对比度的调整通过contrast()实现，contrast(50%)则使图片对比度减弱，效果更为柔和。
drop-shadow()为图片添加阴影效果，使用drop-shadow(2px 4px 6px #000)可为图片添加一个清晰的黑边阴影。
grayscale()将彩色图片转换为灰度图像，例如grayscale(50%)将图片的色彩度降低至一半。
hue-rotate()通过旋转色相改变图片色彩，hue-rotate(50deg)将图片色彩向某一方向旋转了50度。
invert()反转图片颜色，invert(50%)将图片颜色反转至一半。
opacity()调整图片透明度，opacity(50%)使图片变为半透明状态。
saturate()改变图片的饱和度，saturate(50%)降低图片饱和度，使色彩变得更加柔和。
sepia()将图片转换为深褐色调，sepia(0%)为基本色彩，随数值增加色彩倾向深褐色。
最后，url()利用SVG滤镜文件，通过指定锚点引入特定滤镜效果，如使用url("./svg.xml#blur")引入自定义的模糊效果。
所有这些滤镜效果在Google浏览器76版本中得到了验证，为前端开发者提供了丰富的图片处理手段。
热门标签
