[分享]css中如何给图片加上颜色

在 CSS 中，我们可以使用 filter 属性给图片添加颜色效果。首先，让我们通过 CSS 选取要添加颜色的图片：img { filter: 样式; } 在上面的代码中，样式 是我们要为图片设置的样...

在 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 属性时需要注意，它可能会影响图片质量和性能，因此应该谨慎使用。另外，部分浏览器不支持某些样式。