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

是否有可能改变颜色或背景图像的色调上悬停/使用纯的CSS集中如何使用CSS3更改背景图片的色调？

参见例如这里http://jsfiddle.net/jitendravyas/HdDRA/

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

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

编辑：

我期待几乎相同这样http://jsbin.com/icemiy但对于背景图像。

而且我也想改变与淡出的颜色，所以我不能用多张图片

做

来源

2011-12-07 Jitendra Vyas

如何将箭头图像更改为具有所需颜色的箭头图像？ – Teneff

不，你不能做你想要的，你可以改变使用其他不同的背景是什么图片。

另一种方法是使用字体来呈现箭头，然后更改其颜色（这也是可动画的）。

或者，您可以依靠Javascript对图像执行一些颜色操作。请参阅this answer

来源

2011-12-07 08:43:53

你给的链接是内联图像而不是背景 –

只是在这里想着我的头顶。

我想你可以把一个透明的彩色div放在图像顶部，不透明度为0，然后让它的不透明度达到悬停时的10％。例如，如果你对一幅轮廓不规则的图像做了这样的处理，那么看起来很奇怪，而且你对这种着色只能控制有限（我认为它几乎可以做到相当于Photoshop中的半透明图层，因此您无法做任何需要其他技巧（如乘法或屏幕实现）的任何操作。

来源

2011-12-07 08:44:34 GordonM

一个快速和肮脏的修复将是复制箭头图像的颜色，你想要它在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：该链接不存在。它仅用于说明目的

来源

2011-12-07 09:01:52 iGbanam

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

回答

相关问题