html - 如何显示两个颜色的区域？

Question

从现在开始，在我工作的一个网站的设计中，我一直在使用图形来装饰标题部分，该部分由下侧的对角线划分为白色，上侧为透明。结果是这样的：

如果我更改上部颜色，因为图像在其上部区域是透明的，效果看起来很完美：

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

背景变为红色，但我用来装饰页眉的图像没有改变。

有什么方法可以让用户在不破坏标题装饰的情况下更改背景？

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

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，它可以工作，但它可能比你想要的要慢。您可能需要测试一些不同的库和图像格式以查看哪些可以快速生成。另外，使图像尽可能小——应该只是对角线分割的区域，右边的区域可以用 adiv代替。

或者，您可以通过脚本生成唯一的图像服务器端。编写一个脚本，该脚本接受背景颜色的 GET 参数并生成适当的图像（对于 PHP，您可以使用 GD 或 IMagick）。优点是服务器可以生成图像并将其发送给客户端，比客户端在 JS 中生成图像的速度更快。

Answer 2

将以下内容添加到带有背景图像的 div 中：

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

当前的问题是背景不能与背景图像重叠您的 div。添加div 可以position: absolute为您的 div 提供某种“鬼盒”模型，从而允许主体的背景与其重叠。

PS：想玩也可以玩z-index。