如何使用CSS3更改图像的颜色？

Question

这有效：

a { color: hsla(0,100%,50%,0.2) }

而这不是：

img { color: hsla(0,100%,50%,0.2) }

是否有类似img { opacity: 1 }东西允许为图像定义hsl值？

Answer 1

文字和图像是两个不同的东西。

浏览器使用您提供的设置呈现文本（装饰，大小字体颜色......）

以另一种方式呈现图像。 浏览器没有关于图像上的内容的信息，因此不能改变图像本身。

像颜色等参数不会对图像产生影响。

顺便说一句，颜色参数定义文本颜色。

编辑：如果要对图像应用“颜色”，可以使用背景图像创建div，然后在该div中创建另一个具有背景颜色和不透明度的div。 这样，透明色将叠加在图像上。

Answer 2

您可以在某些浏览器中对图像应用过滤器：Firefox允许您将SVG过滤器应用于 CSS中的HTML内容 ，但Chrome，Safari和Opera需要将您的内容包装在SVG中以对其应用过滤器， 这是一个有效的示例在歌剧院 。 可能没有适合您需要的SVG过滤器 ，但如果您没有其他选择，它可能是值得探索的途径。

在Internet Explorer中，您可以使用静态过滤器 。

Answer 3

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

可能是这些过滤器可以帮助您更改不同颜色sachem中的单个图像，但它们也存在浏览器兼容性问题

Answer 4

color属性用作文本字符，边框等的绘图颜色。 它不适用于位图图像。

因此，是否将Alpha通道信息添加到颜色值并不重要：整个声明不适用。

opacity不同，因为它指定整个元素的alpha值。

Answer 5

使用css影响图像颜色的唯一方法是使用opacity来控制Alpha通道。 请注意，你可以通过在if的顶部放置另一个元素来改变图像的亮度。 通过调整位置和大小确保它完全覆盖图像，使背景颜色变为黑色，并将不透明度设置为0.5。

Answer 6

这有效：

img{ filter: hue-rotate(0deg); }

度数为0到360。

W3Schools.com:CSS过滤器属性