如何显示两个颜色区域？

Question

从现在开始，在我工作的其中一个网站的设计中，我一直在使用图形来装饰标题部分，其中包括下侧的对角线分割白色和上侧的透明度。结果如下：

如果我改变上部颜色，因为图像在其上部区域是透明的，效果似乎很完美：

现在，我需要允许用户更改页面背景，这就是问题所在：

背景变为红色，但我用来装饰标题的图像不会改变。

有没有办法让用户在不破坏标题装饰的情况下更改背景？

请注意，由于我允许用户选择任何24位颜色，因此不能选择以不同颜色存储装饰图像的副本。此外，由于多个用户可能会访问同一个文件，因此无法像explained here那样实时更改图片。

Answer 1

您可以尝试使用数据URI实时更改图片：https://developer.mozilla.org/en/data_URIs

使用数据URI，您可以执行以下操作：<img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />。通过生成新图像并将src属性设置为新数据URI，可以在JS中动态更改图像。

您需要找到适合在JS中生成图像的格式。我之前使用过pnglib.js，它可以工作，但它可能比你喜欢的慢。您可能需要测试一些不同的库和图像格式，以查看哪些可以快速生成。此外，使图像尽可能小 - 应该只是对角线分割的区域，右边的区域可以用div代替。

或者，您可以通过脚本生成唯一的图像服务器端。制作一个脚本，为背景颜色获取GET参数并生成适当的图像（对于PHP，您可以使用GD或IMagick）。优点是服务器可以生成图像并将其发送到客户端，而不是客户端可以在JS中生成它。

Answer 2

使用背景图像将以下内容添加到div中：

position: absolute;
top: 0px;
right: 0px;

目前的问题是背景不能将div与背景图像重叠。添加position: absolute会给你的div一些“鬼盒”模型，从而允许身体的背景重叠。

P.S。：如果您愿意，也可以使用z-index。