在 CSS 中更改图像颜色

Subodh Poudel 2023年2月20日
  1. 在 CSS 中使用 filter 属性更改图像颜色
  2. 使用 filter 属性中的 opacity()drop-shadow() 函数来更改 CSS 中的图像颜色
在 CSS 中更改图像颜色

本文将介绍几种在 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 的图像六次,并设置类 brightnessblursaturategrayscale,和 contrastimg 标签,如下例所示。在 CSS 中,选择 img 标签并将 width 设置为 25%,将 float 属性设置为 left

接下来,选择 brightness 类并使用 filter 属性将亮度设置为 1.25。同样,选择相应的类别并根据类别将 blur 设置为 2pxsaturate 设置为 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。结果,阴影直接位于图像后面。

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

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

示例代码:

<img src="/img/DelftStack/logo.png" />
img{
filter: opacity(0.4) drop-shadow(0 0 0 red); 
}
作者: Subodh Poudel
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相关文章 - CSS Image

相关文章 - CSS Color