Question

我需要使用Javascript / CSS创建PNG的轮廓。这可能吗？

我尝试了以下内容：使用绝对定位和z-index多次叠加具有较低不透明度的PNG。这不起作用。

不幸的是我不能使用PHP或其他东西，然后使用Javascript和CSS。

我有一些叠加等的想法，但我无法弄清楚如何做到这一点。有什么提示吗？

更新：这只需要在webkit浏览器中工作，所以你可以带上你的webkit技巧！：）

Answer 1

在纯HTML / CSS中无法实现。

在嵌入式SVG中，使用filter（例如feColorMatrix）可以将所有通道设置为除不透明度之外的一种颜色。

可以在<canvas>使用composite operation，例如首先绘制图像，然后使用source-out模式在顶部绘制单一颜色。

在IE中使用MaskFilter可能是可能的，使用MaskFilter生成覆盖固定颜色（例如黑色）的掩蔽颜色（例如白色）。但是我觉得你会失去任何变异不透明的光滑边缘。

这将是很多浏览器嗅探和烦恼。我试着避免它。

Answer 2

考虑到您已使用webkit对此进行了标记，您应该查看Surfin' Safari blog post about CSS masks。

E.g。这是你想要的吗？

<!doctype html>
<style>
div {
    width: 215px;
    height: 174px;
    background: black;
    -webkit-mask-image: url("http://webkit.org/images/icon-gold.png");
}
</style>
<div></div>

使用Javascript / CSS在PNG中绘制所有像素（不包括透明）？

2 个答案: