javascript - 背景颜色到CSS中的透明背景图像

Question

例如，我可以使用带有 background: url(dump.gif); 的 css 将背景图像放到特定的 div 中。如果说 gif 是透明的，我可以用 css 为 它 应用背景颜色吗？假设我单击一个按钮，然后运行一个命令来仅更改透明图像的背景，并将该图像嵌入到更大的 div 中。

假设玻璃嵌入到一个更大的 div 中，并按照描述设置为 css 背景。任何能够改变它的背景的方式。

“不”作为答案是可以的，至少我会停止疑惑。

编辑:添加了 jsfiddle。如果 glas 有误导性，请单击 fiddle 。

http://jsfiddle.net/v4yfdkmf/

基本上是移动加载图像所在的位置。我想用这段代码改变它的背景。

Answer 1

您可以为此使用 Canvas API。 (另见 https://developer.mozilla.org/en-US/docs/Canvas_API/Tutorial/Pixel_manipulation_with_canvas/)

你可以做一些像他们用于他们的颜色逆变器的事情:

var img = new Image();
img.src = 'your pic source';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
  var data = imageData.data;

你现在有一个包含图像颜色的数组。
然后在函数中编写一些代码来遍历像素并在像素为白色(或 gif 具有的任何其他默认背景颜色)时基本上更改它。

然后用ctx.putImageData(imageData, 0, 0);绘制图片

希望这就是你的意思。