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

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

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

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

有没有办法允许用户更改背景而不破坏标题装饰？

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

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

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

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

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