2

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

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

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

我对叠加层等有了一些想法，但我不知道该怎么做。有小费吗？

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

4

2 回答 2

3

在纯 HTML/CSS 中是不可能的。

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

<canvas>在使用复合操作中是可能的，例如首先绘制图像，然后使用source-out模式在顶部绘制单一颜色。

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

这将是很多浏览器嗅探和烦恼。我会尽量避免它。

于 2010-01-24T13:16:57.973 回答
1

考虑到您已将其标记为webkit，您应该查看关于 CSS 掩码的Surfin 的 Safari博客文章。

例如，这是你想要的吗？

<!doctype html>
<style>
div {
    width: 215px;
    height: 174px;
    background: black;
    -webkit-mask-image: url("http://webkit.org/images/icon-gold.png");
}
</style>
<div></div>
于 2010-01-24T13:21:31.440 回答