javascript - 如何在css中进行图像颜色混合？

Question

我有一个 png 图像，其中一些像素是透明的。图像全是白色的。给定十六进制代码，如何使用 css 或 javascript 将颜色混合到另一种颜色？

我正在寻找类似的东西（这只是伪代码）

<img src="test.png" style="color-blend:#ffea6e;"/>

所以这样做的效果是，图像（因为它是白色的）新颜色将完全是给定的颜色。透明的像素不应受到影响（即保持透明）。

Answer 1

使用 CSS 渐变可以实现这种效果。只要确保混合部分具有正确的“停止”设置。

一个伟大的 CCS 梯度生成器：http: //www.colorzilla.com/gradient-editor/

您可以看到已经包含透明度的预设渐变来帮助您入门。

<canvas> 元素对于您要完成的工作似乎有点过头了，它是 HTML5 标记，仅受 IE9+ 支持（以及几乎所有其他浏览器；）。