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

Question

有没有办法改变已经关联背景图像的HTML元素的颜色或“色调”？

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

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

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

Answer 1

使您的背景图像成为半透明的PNG，然后使用类似的东西设置元素的背景;

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

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

这在Internet Explorer 6中不起作用，因此您需要小心。

Answer 2

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

将相同的图像放在2个div中，然后使每个div的背景颜色略有不同。

（但这需要修复IE中的PNG） http://www.twinhelix.com/css/iepngfix/

Answer 3

除非：

，否则无法改变背景图像的颜色

• 制作透明div并将其叠加在background-image
之上
• 使用非常漫长而复杂的javascript（浏览器密集）

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