html - 反转alpha png图片

Question

我有包含白色和 alpha（透明）像素的小图标 png 图片。我可以使用css（首选）或javascript以某种方式“反转”该图标以获得：

白色像素 -> 透明像素

透明像素 -> 白色像素

我看到有一些新的 CSS 属性，如过滤器和掩码，但并非所有主要浏览器都支持它们。

Answer 1

使用 JavaScript，您可以进行各种像素操作，但我警告您，这不是一条捷径，Internet Explorer 8 和更早版本将无法工作。

我建议您按照 Tyler Crady 的建议使用两个单独的图像，但是既然您问...

这是代码

document.addEventListener('DOMContentLoaded', function() {
  var canvas = document.getElementById('channelconvert');
  var context = canvas.getContext('2d');

  var image = new Image();
  image.onload = function() {
    // Draw this image with offset 0x0
    context.drawImage(this, 0, 0);
  }
  image.src = 'test.png';

  function invert() {
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    var pixels = imageData.data;

    // Loop through set of fours due to four color channels: red, green, blue, alpha
    for (var i = 0; i < pixels.length; i += 4) {
      // Ensure that all color channels are fully white
      pixels[i] = 255;                      // Red channel
      pixels[i + 1] = 255;                  // Green channel
      pixels[i + 2] = 255;                  // Blue channel
      pixels[i + 3] = 255 - pixels[i + 3];  // Alpha channel
    }

    imageData.data = pixels;

    context.putImageData(imageData, 0, 0);
  }

  // Convert channel
  canvas.addEventListener('mouseover', invert, false);

  // Reset to the original state
  canvas.addEventListener('mouseout', invert, false);
});

...这是一个快速演示，您可以查看 HTML 部分，这非常简单。

Answer 2

我认为最简单和最快的方法是创建第二个已经倒置的图像。假设您想在悬停时反转图片，您可以使用 :hover css 类来交换 2 个图像。

    #divId:hover{background-image: url('imageName.ext') }