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

Question

我有这个具有可变透明度的红色PNG图像，但我需要在网页上将其显示为具有可变透明度的白色。我认为这只有两种方法可行：

• 将背景颜色设置为白色，但不知何故使用PNG的Alpha通道设置其透明度。
• 以某种方式使PNG去饱和或将其调色板更改为仅白色。

我只允许使用CSS来实现这一目标;否则，我会考虑其他选择。

编辑：我只需要在Safari（webkit）中使用它。对不起，我之前没有提到过。

Answer 1

要求回答：

-webkit-mask可以拍摄图片并使用它的alpha通道作为遮罩（非常像photoshop遮罩）

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

Fiddle

但我同意所有提示画布的答案 - 我知道你只限于纯粹的CSS，但画布是一种方式去这里。

Answer 2

不，您不能仅使用CSS以跨浏览器方式执行此操作。

（但是，使用HTML5 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的source image：

result（显示在黑页上）：

此处的关键是使用destination-in合成模式将源图像的不透明度作为结果，同时保持原始颜色（在本例中为白色）完整。

Answer 3

在少于9的IE版本中，有chroma filter，这样做。在其他浏览器中，你运气不好。

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