Question

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

白色像素 - ＆gt;透明像素

透明像素 - ＆gt;白色像素

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

Answer 1

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

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

Answer 2

使用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);
});

...和here is a quick demo因此您可以查看HTML部分，这非常简单。

反转alpha png图片

2 个答案: