只使用CSS，我能否仅使用PNG的alpha通道？

Question

我有一张红色的PNG图片，它具有可变透明度，但是我需要在网页上将其显示为带有可变透明度的白色。我认为这只有两种可能的方式：

• 将background-color设置为白色，但是以某种方式使用PNG的alpha通道来设置其透明度。
• 以某种方式去饱和PNG或更改其颜色调色板，使其仅为白色。

我只能使用CSS来实现此目标；否则，我会尝试其他选项。 编辑：我只需要在Safari（webkit）中运行即可。很抱歉我之前没有提到这一点。

- jedmao

---

您需要在哪些浏览器中运行此程序？使用IE的“filter”可能是可行的。 - Pekka

...或者 WebKit 图像遮罩。 - Litek

@Litek，太好了！现在请创建一个解决方案，以便我可以接受它。 - jedmao

Answer 1

请求的答案：

-webkit-mask 可以使用图像的 alpha 通道作为遮罩（类似于 Photoshop 的遮罩）。

div {
  background:white;
  -webkit-mask:url(url/to/image.png);
}

Fiddle

但我同意所有建议使用canvas的答案 - 我知道你只能使用纯css，但canvas是解决这个问题的方法。

- Litek

---

没错，我喜欢Canvas，但这是一个CSS挑战。感谢你的好答案 :) - jedmao

看起来你使用的图片的原始上传者不喜欢你使用热链接。也许换成维基共享资源上的图片会更好。 - zoltankundi

Answer 2

不，你不能只使用CSS以跨浏览器的方式实现此操作。

（然而，如果使用HTML5 Canvas与您的图像一起使用，这将非常容易。）

Canvas解决方案：

您可以在此处实时查看此示例：http://phrogz.net/tmp/canvas_png_alpha.html

var ctx = document.createElement('canvas').getContext('2d');
var img = new Image;
img.onload = function(){
  // Make the canvas the same size as the image
  var w = ctx.canvas.width  = img.width;
  var h = ctx.canvas.height = img.height;

  // Fill it with (fully-opaque) white
  ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h);

  // Draw the image in a special blend mode that forces its opacity on the result
  ctx.globalCompositeOperation = 'destination-in';
  ctx.drawImage(img,0,0);

  // Set an image on the page to use this canvas data
  // The data URI can also be copy/pasted and used inline in HTML or CSS
  document.getElementById('result').src=ctx.canvas.toDataURL();
}

// Load the image to use _after_ setting the onload handler
img.src = 'alphaball.png';

源图像使用其alpha通道：

结果（显示在黑色页面上）:

关键在于使用destination-in合成模式将源图像的不透明度作为结果，同时保留原始颜色（在这种情况下是白色）。

- Phrogz

---

非常酷，我将来很可能会在其他事情上使用它，但是基于设定的限制，它并不能回答问题。抱歉。 - jedmao

@sfjedi 没问题；我很高兴你问到了只使用CSS的版本，并且编辑说明了只适用于Webkit。我之前不知道 webkit-mask，现在很高兴知道了它。 - Phrogz

Answer 3

在低于9版本的IE浏览器中，有一个名为chroma filter的功能可以实现这个效果。但在其他浏览器中，则无法使用此功能。

您可以使用canvas标签和一些javascript来获得相同的效果，但这不是CSS。

- Rich Bradshaw