迹忆客 专注技术分享

本文将介绍几种在 CSS 中改变图片颜色的方法。

在 CSS 中使用 filter 属性更改图像颜色

filter 属性在 CSS 中设置图像的叠加。

我们可以使用 filter 属性在图像中应用视觉和图形效果。例如，我们可以使用 filter 属性模糊图像、更改对比度和亮度、应用阴影效果、饱和度、灰度和不透明度。

我们可以将多种选项应用于具有 filter 属性的图像。filter 属性的语法如下所示。

filter: none | brightness() | greyscale () | contrast () | opacity () | saturate ();

我们可以使用 % 值来设置上述选项。较低的值对图像的影响较小，反之亦然。

我们也可以使用十进制值代替百分比值。例如，我们可以用 80% 来表示 0.8。

现在，让我们看一下不同过滤器的示例。

例如，使用 img 标签插入带有 URL https://loremflickr.com/320/240 的图像六次，并设置类 brightness、blur、saturate、grayscale，和 contrast 到 img 标签，如下例所示。在 CSS 中，选择 img 标签并将 width 设置为 25%，将 float 属性设置为 left。

接下来，选择 brightness 类并使用 filter 属性将亮度设置为 1.25。同样，选择相应的类别并根据类别将 blur 设置为 2px、saturate 设置为 300%、grayscale 设置为 200% 和 contrast 设置为 60%。

在这里，第一张图像是原始图像，其余图像包含过滤器。因此，我们可以使用 filter 属性来更改 CSS 中的图像颜色。

示例代码：

<img src="/img/DelftStack/logo.png" />
<img class="brightness" src="/img/DelftStack/logo.png" />
<img class="blur" src="/img/DelftStack/logo.png" />
<img class="saturate" src="/img/DelftStack/logo.png" />
<img class="grayscale" src="/img/DelftStack/logo.png" />
<img class="contrast" src="/img/DelftStack/logo.png" />

img {
 width:25%;
 float:left;  
}

.brightness { filter: brightness(1.25); }
.blur { filter: blur(2px); }
.saturate { filter: saturate(300%); }
.grayscale { filter: grayscale(200%); }
.contrast { filter: contrast(60%); }

使用 filter 属性中的 opacity() 和 drop-shadow() 函数来更改 CSS 中的图像颜色

我们可以通过组合 filter 属性中的 opacity() 和 drop-shadow() 函数来更改 CSS 中的图像颜色。我们可以从 drop-shadow 函数中提供阴影的颜色，我们可以将阴影设置得尽可能细，这样图像的颜色只会改变而不会形成实际的阴影。

不透明度将为图片提供更明显的颜色。我们可以使用 drop-shadow 函数指定水平阴影、垂直阴影、模糊半径、传播值和颜色。

例如，插入一个 HTML 图像，在 CSS 中选择 img 标签，然后对其应用 filter 属性。在 filter 属性中，将 opacity 设置为 0.4。接下来，将值 0 0 0 red 设置为 drop-shadow 函数的参数。

在这里，我们为水平和垂直阴影设置值 0。结果，阴影直接位于图像后面。

blur 的 0 值也会使图像边缘更清晰。但是，红色颜色将应用于阴影，图像将偏红。

通过这种方式，我们可以结合 filter 属性中的 opacity() 和 drop-shadow() 函数来更改 CSS 中的图像颜色。

示例代码：

<img src="/img/DelftStack/logo.png" />

img{
filter: opacity(0.4) drop-shadow(0 0 0 red); 
}