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

时间:2010-08-07 12:08:18

标签: html css html5 css3

这有效:

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

这不是:

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

是否有类似img { opacity: 1 }的内容允许为图像定义hsl值?

6 个答案:

答案 0 :(得分:11)

文字和图片是两回事。

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

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

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

顺便说一下,color参数定义文本颜色。

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

答案 1 :(得分:1)

您可以在某些浏览器中对图片应用过滤器:Firefox允许您从CSS应用SVG filters to HTML content,但Chrome,Safari和Opera需要将您的内容包装在SVG中以对其应用过滤器,{{ 3}}。您可能没有合适的here's an example that works in Opera,但如果您没有其他选择,这可能是值得探索的途径。

在Internet Explorer中,您可以使用SVG filter

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

这有效:

Interface {
    void Iaminterfacemethod();
}

Class implements Interface {

    public void Iaminterfacemethod(){
        System.out.println("I'm class implements Interface");
    } 

    void classmethod() {
        System.out.println("I'm class Method");
    }

    public static void main(String[] args) {
        Interface O = new Class();
        O.classmethod(); --------->Why Not ?
    }
 }

度为0到360。

W3Schools.com: CSS filter Property