在CSS中将背景颜色设置为透明的背景图片

Question

我可以使用CSS将背景图像设置为特定的

，例如：background: url(dump.gif);。如果说这个gif是透明的，我能否使用CSS对它应用背景颜色？比如我点击一个按钮，运行一个命令来仅更改透明图像的背景，而该图像嵌入到更大的

中。

假设玻璃嵌入到一个更大的div中，并按照描述设置为css背景。有没有办法只更改它的背景颜色？

"不行"也可以作为答案，至少我会停止纠结。

编辑：添加了jsfiddle。如果“glas”这个词让人困惑，请点击fiddle链接。

http://jsfiddle.net/v4yfdkmf/

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

- user4065758

---

非常抱歉，但是我对于这些代词（例如 it）感到有些困惑。您的问题似乎很有趣，但我认为我还没有完全理解它。您能否澄清一下图像中哪部分是“背景”，图像是什么以及它们（如果有的话？）应该包含在哪个 div 中？ - musically_ut

只需使用CSS background-color: green 作为示例就可以了... 您最好将一些代码放入您的问题中，或创建一个Fiddle。 - skobaljic

是的，大小始终相同。 - user4065758

希望这个 jsfiddle 能够帮到你。 - user4065758

如果你的gif图像中玻璃轮廓外的区域不透明，只有玻璃内部是透明的，那么你可以使用background: yellow url('glass.gif');来仅对透明区域应用背景颜色。 - Rohit Kumar

Answer 1

你可以使用 canvas API 来实现这个功能。 （另请参见 https://developer.mozilla.org/zh-CN/docs/Web/API/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);绘制图片。

希望这就是您想要的。

- Tim V.

---

在这种情况下，我将创建一个新元素，然后需要将其附加到所需的 div 中。如果是这样，那么这种方法可能不太好用，因为我的代码很难适应这些变化。不过，这仍然是一个优雅的解决方案，谢谢！也许对其他人有用。 - user4065758

那确实是必要的。很抱歉我不能帮助你！ - Tim V.

Answer 2

您可以使用Javascript生成一个像素的base64编码图像，然后将其设置为第二个背景。请查看Fiddle或查看以下内容：

function encodeHex(s) {
    s = s.substring(1, 7);
    if (s.length < 6) {
        s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
    }
    return encodeRGB(
    parseInt(s[0] + s[1], 16), parseInt(s[2] + s[3], 16), parseInt(s[4] + s[5], 16));
};

function encodeRGB(r, g, b) {
    return encode_triplet(0, r, g) + encode_triplet(b, 255, 255);
};

function encode_triplet(e1, e2, e3) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    enc1 = e1 >> 2;
    enc2 = ((e1 & 3) << 4) | (e2 >> 4);
    enc3 = ((e2 & 15) << 2) | (e3 >> 6);
    enc4 = e3 & 63;
    return keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
};

function generatePixel(color) {
    return "data:image/gif;base64,R0lGODlhAQABAPAA" + color + "/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
};


var imageDiv = $('.big_div');
var originalImage = imageDiv.css('background-image');
$('.change_color').on('click', function (e) {
    var hex = $('#color_hex').val();
    var color = encodeHex(hex);
    var data = generatePixel(color);
 imageDiv.css({
        'background-image': originalImage + ', url(' + data + ')'
    });
});

.big_div {
    background: url('http://info.eps.surrey.ac.uk/logos/transbugs.gif') no-repeat center center;
    background-size: 160px 100px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big_div"></div>
<fieldset>
    <legend>Pick color:</legend>
    <p>
        <label for="color_hex">Hex color:</label>
        <input id="color_hex" type="text" placeholder="#ccc" />
    </p>
    <p>
        <button class="change_color">Change color</button>
    </p>
</fieldset>

为了对颜色进行编码，要感谢 这个 Fiddle，但是找不到作者的名字。

- skobaljic

---

感谢您提供的解决方案。我非常感激您所投入的时间。我希望其他人也能从中受益。我会尝试应用它。 - user4065758

我的荣幸，应该不难实现。 - skobaljic