Question

是否可以使用纯css

更改悬停/对焦时背景图像的颜色或色调

请参阅此处示例http://jsfiddle.net/jitendravyas/HdDRA/

在上面的例子中，图像上有一个白色箭头。我想在悬停和聚焦时将白色箭头（不是其他背景图像）的颜色更改为其他颜色。

我不能在我的情况下使用内嵌图像。

修改

我看起来像这个http://jsbin.com/icemiy几乎一样，但是对于背景图像。

而且我也希望通过淡出来改变颜色，所以我无法使用多个图像

Answer 1

快速而肮脏的修复方法是将箭头图像复制为您希望它成为onHover的颜色。然后在代码中用此替换背景图像。

body 
{
    background: 
        url(http://www.kapellohair.com/images/white-arrow.png) no-repeat,
        url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
    background-position:
        center 50px, 
        center top;
}

body:hover
{
    background: 
        url(http://www.example.com/images/arrow-with-desired-color.png) no-repeat,
        url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
    background-position:
        center 50px, 
        center top;
}

p.s：该链接不存在。它仅用于说明目的

Answer 2

不，你不能做你想做的事，你可以使用另一个不同的图像来改变背景。

另一种方法是使用字体渲染箭头，然后改变颜色（也可以设置动画）。

或者，您可以依靠Javascript对图像进行一些颜色处理。见this answer

Answer 3

在这里想一想我的头脑。

我想你可以在图像的顶部放置一个透明的彩色div，不透明度为0，然后在悬停时使其不透明度达到10％。你可能会做的事情有点受限，例如，如果你用一个不规则轮廓的图像看起来很奇怪，你只能对着色进行有限的控制（我认为它会相当多）相当于Photoshop中的半透明层，因此您无法执行任何需要其他技巧（如乘法或屏幕实现）的操作。

如何使用CSS3更改背景图像的色调？

3 个答案: