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

标签 javascript html css

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

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

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

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

最佳答案

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

一个很棒的 CCS 梯度生成器:http://www.colorzilla.com/gradient-editor/

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

元素对于您想要完成的事情来说似乎有些矫枉过正,它是 HTML5 标记,仅受 IE9+ 支持(以及几乎所有其他浏览器;)。

关于javascript - 如何在 css 中进行图像颜色混合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10843268/

相关文章:

javascript - jQuery 获取调用脚本标签的引用

html - 在 IE8 上禁用 CSS3 复选框

html - 离页边距大

javascript - CSS Jquery 垂直导航菜单与水平子菜单

html - 滚动 y 容器中的粘性页脚取决于内容的高度

css - 在不透明的纸上渲染拉斐尔元素

javascript - 如何在 RequireJS 中混合 Underscore 插件?

javascript - 函数调用困惑的事件处理

javascript - 使用 jQuery 删除表但不删除表单和字段

javascript - 交换文本标签以选择值