Question

有没有办法使用css更改img（不是背景）的颜色？

我的意思是有一个图像，在悬停时我想说它变黑了，最好的方法呢？是的，不使用不透明度是可能的吗？

Answer 1

您可以使用CSS3过滤器，如下所示：

img:hover {
  -webkit-filter: brightness(.5);
  filter: brightness(.5);
}

有关更多兼容性的信息 - CSS filters

Answer 2

您可以使用CSS过滤器，例如：

更改饱和度：

    -webkit-filter: hue-rotate(270deg);

或改变亮度：

-webkit-filter: brightness(.5);

示例：

http://jsfiddle.net/m9sjdbx6/3/

http://jsfiddle.net/m9sjdbx6/4/

<img src="http://2.bp.blogspot.com/-hAOQ_DrZM1E/Ub6s63_iqxI/AAAAAAAC9hc/2mfBJjeQNos/s1600/Blind+Chess-Board.jpg"></img>

饱和度（颜色）：

img:hover {
    -webkit-filter: hue-rotate(270deg);

}

亮度：

img:hover {
-webkit-filter: brightness(0.2);


}

Answer 3

是的，这是可能的。试试这个......（老式的方式）

html:
<div id="contain">
<div id="contain2">
    <img src="" width="300px" height="300px" alt="image"/>
</div>
</div>


css:
#contain {
    /*background: grey;*/
    width:300px;
    height:300px;
}
#contain:hover {
    background:red;
}

#contain:hover #contain2{
    background:yellow; /*CHANGE YELLOW TO .PNG IMAGE OF TRANSPARENT IMAGE*/
}

#contain2 {
    width:300px;
    height:300px;
}

替换背景：黄色; to background：url（'Transparent.png'）;您使用的图像应使用滤镜或透明效果 - 这可以在烟花中完成。这是他们用来实现跨浏览器兼容性的方式。

查看@ http://jsfiddle.net/ofm3uum6/

如果您需要更多帮助或者这不是您想要的，请回复评论 - 我很乐意提供帮助

有没有办法改变图像颜色？

3 个答案: