如何使用CSS3更改图像的颜色？ [英] How can the colors of an image be changed using CSS3?

问题描述

这样做：

  a {color：hsla（0,100％，50％，0.2）} 
  

这不会：

  img {color：hsla（0,100％，50％，0.2）} 
  

像 img {opacity：1} 允许为图像定义hsl值？

解决方案<

文本是由浏览器使用您提供的设置（装饰，大小字体颜色...）来渲染的

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

像颜色等参数不会影响图像。 / p>

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

编辑：如果要应用颜色到图像，您可以创建一个带有背景图像的div，然后在该div中创建一个带有背景颜色和不透明度的div。那么透明颜色将覆盖在图像上。

This works:

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

And this does not:

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

Is there something like img { opacity: 1 } that allows to define hsl values to an image?

解决方案

Text and images are 2 different things.

Text is rendered by the browser with the settings you provide (decoration, size font color ...)

an image is rendered in another way. the browser does not have information about what is on the image, and can therefor not alter the image itself.

Parameters like color etc will not have effect on the image.

By the way, the color parameter defines the text color.

Edit: If you want to apply a "color" to an image, you could create a div with a background image, and then in that div another div with a background color and an opacity. that way the transparant color will be overlayed on the image.

这篇关于如何使用CSS3更改图像的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！