如何使背景图片的黑色部分透明？

Question

我想要实现的效果如图所示。二维码由黑色和白色组成，但我希望黑色部分是透明的，以便与外部背景融合。外部背景可能会改变，不总是绿色。

我尝试使用CSS的背景混合模式，像这样：

 background-image: url('');
 background-color: rgba(0,0,0,0);
 background-blend-mode: screen;

它什么也不做。

感谢您的帮助。

- Jc.

---

将QR码转换为透明的PNG格式。其中黑色值具有0的alpha值。 - evolutionxbox

Answer 1

你的混合模式是正确的，我假设背景图片的url是有意省略的，因此我会首先考虑浏览器兼容性。为此，请查看 caniuse.com上的兼容性表，例如。

我建议在这里使用透明的PNG，因为这正是它的目的。即使你让background-blend-mode起作用，除非背景完全是黑色（即#000）-看着你的例子图片，这并不是这种情况，所以你无论如何都不会得到想要的效果。

我能想到的另一个问题是，你可能想要将QR码放在img元素中，原因如下：

• 用户可能希望以预期方式保存图像
• 背景图像不会呈现为块元素，因此根据您的布局，它们可能很容易被覆盖
• 打印页面时通常会丢弃背景图像，因此不应将其用于内容
• 屏幕阅读器可能会忽略背景图像，假定它们只是设计

- TheThirdMan

Answer 2

你可以通过canvas像素操作实现这个效果，但正如其他用户所说，更简单的方法是通过图像编辑程序使您的图像透明。

我创建了一个示例，演示了如何在此处的fiddle中实现此目的。

这段代码首先获取图像元素<img id="code" src="url.png">，构造一个画布对象，并通过context.drawImage调用将图像内容绘制到画布中。

// Get the image element.
var el = document.getElementById('code');

// Create a canvas and set its width and height.
var canvas = document.createElement('canvas');
canvas.setAttribute('width', 250);
canvas.setAttribute('height', 250);

// Get the canvas drawing context, and draw the image to it.
var context = canvas.getContext('2d');
context.drawImage(el, 0, 0, canvas.width, canvas.height);

下一步，

// Get the canvas image data.
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

// Create a function for preserving a specified colour.
var preserveColor = function(imageData, color) {
    // Get the pixel data from the source.
    var data = imageData.data;
    // Iterate through all the pixels.
    for (var i = 0; i < data.length; i += 4) {
        // Check if the current pixel should have preserved transparency. This simply compares whether the color we passed in is equivalent to our pixel data.
        var preserve = data[i] === color.r
            && data[i + 1] === color.g
            && data[i + 2] === color.b
            && data[i + 3] === color.a;

        // Either preserve the initial transparency or set the transparency to 0.
        data[i + 3] = preserve ? data[i + 3] : 0;
    }
    return imageData;
};

// Get the new pixel data and set it to the canvas context.
var newData = preserveColor(imageData, {r: 255, g: 255, b: 255, a: 255});
context.putImageData(newData, 0, 0);

最后，我们使用document.body.appendChild(canvas);将元素添加到页面中。您还可以选择使用画布完全替换原始图像元素。

显然，这不是一个理想的解决方案，因为迭代像素数据可能非常缓慢，并且随着图像大小的增加而增加。您还可以轻松地更改preserveColor函数，以便使用makeTransparent执行相反的操作，其中指定的颜色变为透明。但是，对于与您指定的颜色相似的颜色，这将需要更多的逻辑。或者，您可以将其实现为着色器，以便将处理转移到GPU而不是CPU上，从而使处理更有效率。

- Monica Olejniczak