在 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
的图像六次,并设置类 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);
}
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