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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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