CSS-为黑色和彩色添加颜色使用滤镜的白色PNG图像 [英] CSS - Add Color to Black & White PNG Image Using a Filter
问题描述
在CSS中是否可以将颜色添加到黑色&使用滤镜的白色图像?我说的是像在Photoshop中那样使用滤镜,更好的例子是Microsoft PowerPoint中的滤镜.
Is it possible in CSS to add color to a black & white image using a filter? I'm talking about using filters like it's possible in Photoshop, and an even better example would be the ones in Microsoft PowerPoint.
我想做的是这样的:我有一个黑色图标的图像文件.我想为其添加一个滤镜,以便图像中的所有内容(背景是透明的)都具有我通过使用滤镜选择的颜色,这样我就可以使图标具有所需的任何颜色.就像我在标题中所说的那样,它是一个PNG图片,据我所知,我不能使用SVG过滤器.
What I'm trying to do is this: I have an image file of a black icon. I want to add a filter to it such that everything in the image (the background is transparent) will have the color I choose by using the filter, such that I'd be able to have the icon in whatever color I want. Like I said in the title, it's a PNG image, so as far as I know, I can't use SVG filters.
我该怎么做?我正在尝试使用原始图标为网站写一个主题,但我坚持这样做.
How can I do this? I'm trying to write a theme for a website using the original icons, and I'm stuck on this.
更新:我想使用原始的PNG图像.我不会用SVG或预编辑的PNG替换它们.
Update: I want to use the original PNG images. I'm not going to replace them with SVGs, or pre-edited PNGs.
非常感谢!
推荐答案
您可以使用CSS过滤器来做到这一点,尽管我完全不建议这样做:
You can do it with CSS filters, though I wouldn’t recommend that at all:
.colorizable {
filter:
/* for demonstration purposes; originals not entirely black */
contrast(1000%)
/* black to white */
invert(100%)
/* white to off-white */
sepia(100%)
/* off-white to yellow */
saturate(10000%)
/* do whatever you want with yellow */
hue-rotate(90deg);
}
.example-clip {
display: block;
height: 20px;
margin: 1em;
object-fit: none;
object-position: 0 0;
width: 300px;
}
.original {
filter: contrast(1000%);
}
body {
background: #333;
}
<img class="colorizable example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />
<img class="original example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />
这篇关于CSS-为黑色和彩色添加颜色使用滤镜的白色PNG图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!