在 CSS 中,我们可以使用 filter 属性给图片添加颜色效果。首先,让我们通过 CSS 选取要添加颜色的图片:img { filter: <em>样式<
在 CSS 中,我们可以使用 filter
属性给图片添加颜色效果。
首先,让我们通过 CSS 选取要添加颜色的图片:
img { filter: <em>样式</em>; }
在上面的代码中,样式
是我们要为图片设置的样式。
下面是一些常见的样式,可用于给图片添加颜色效果:
/* 黑白效果 */ filter: grayscale(100%); /* 反转颜色 */ filter: invert(100%); /* 模糊效果 */ filter: blur(5px); /* 饱和度调节 */ filter: saturate(5); /* 透明度调节 */ filter: opacity(50%); /* 色相旋转 */ filter: hue-rotate(90deg); /* 对比度调节 */ filter: contrast(200%);
现在,让我们使用 filter
属性给图片添加颜色效果:
img { filter: grayscale(100%); }
上面的代码将图片变成黑白效果。
其它样式也是类似的,只需将 grayscale(100%)
替换为其它样式即可。
在使用 filter
属性时需要注意,它可能会影响图片质量和性能,因此应该谨慎使用。另外,部分浏览器不支持某些样式。
粉丝
0
关注
0
收藏
0