从现在开始,在我工作的一个网站的设计中,我一直在使用图形来装饰标题部分,该部分由一个对 Angular 线部分组成,下侧为白色,上侧为透明。结果是这样的:
如果我改变上面的颜色,因为图像在其上部区域是透明的,效果看起来很完美:
现在,我需要允许用户更改页面背景,这就是问题所在:
背景变为红色,但我用来装饰页眉的图像没有改变。
有什么方法可以让用户在不破坏页眉装饰的情况下更改背景?
请注意,以不同颜色存储装饰图像的副本不是一种选择,因为我允许用户选择任何 24 位颜色。此外,像 explained here 这样实时更改图像不是一种选择,因为多个用户可能会访问同一个文件。
最佳答案
您可以尝试使用数据 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 中生成图像更快。
关于html - 如何显示两种颜色的区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10015622/