更改已具有背景图像的元素的背景颜色

Question

有没有方法可以更改已经具有关联背景图像的HTML元素的颜色或“色调”？

我想在屏幕上显示具有相同背景图像的两个元素，但是我想更改其中一个元素以使原始图像的阴影略有不同。

到目前为止，我已经尝试过CSS，但它只允许我用新的替换背景颜色。

我可以做到的唯一方法是创建一个新图像，并在photoshop中更改原始图像，并更改其中的色调。但这意味着我会得到两个不同的图像，如果可能的话，我想避免这种情况。

Answer 1

你不能改变的背景图像的颜色，除非：

• 你做一个透明的div和它叠加在背景图像
• 使用一个非常漫长而复杂的JavaScript的顶部（密集上浏览器）

您可以使用css属性opacity来改变阴影，但它只会变浅。

Answer 2

您还可以尝试使图像有点透明。

把2个div的相同图像，然后使每个div的背景颜色有点不同。

（然而，这需要在IE浏览器的PNG修复） http://www.twinhelix.com/css/iepngfix/

Answer 3

让你的背景图像的半透明PNG，然后设置像这样的东西你的元素的背景;

#element1 {background: #fff url(bgimage.png);} 
#element2 {background: #00f url(bgimage.png);} 

您的背景色将通过半透明图像显示，允许您将“色调”设置为任何想要的颜色。

这不适用于Internet Explorer 6，因此您需要注意这一点。