css - 包含特定形状的背景(如钻石)

Question

我正在尝试将背景限制为特定形状。

示例:我有一个方形的 div 或 img 标签。然后我希望它的一部分( Angular )是透明的，而它的一部分(中间的菱形)是某种颜色(带有背景颜色)或某种图像(带有背景图像)。

我可以通过制作一个中间有透明菱形的白色 png 文件来模拟这一点，并将图像的背景设置为我想要的，这样背景仅以菱形显示。

我想去掉显示在边缘周围的白色部分(例如，有一个透明的 png，中间有一个白色菱形)，但是背景只会在边缘显示出来。所以基本上，我希望图像上的背景显示它不透明的地方，而不是透明的地方。我几乎可以肯定这与图像有关，但如果您有其他选择，请告诉我。

这是一个例子 http://jsfiddle.net/r7jxm/ .你可以看到所有图像都有白色边缘，应该是透明的，所以下面的图像没有显示出来。最后我仍然需要能够使用 css 更改背景颜色。

Answer 1

它没有最好的支持，但是 CSS masks确实存在。

他们听起来像是会实现您想要的。