我正在尝试将背景限制为特定形状。
示例:我有一个方形的 div 或 img 标签。然后我希望它的一部分( Angular )是透明的,而它的一部分(中间的菱形)是某种颜色(带有背景颜色)或某种图像(带有背景图像)。
我可以通过制作一个中间有透明菱形的白色 png 文件来模拟这一点,并将图像的背景设置为我想要的,这样背景仅以菱形显示。
我想去掉显示在边缘周围的白色部分(例如,有一个透明的 png,中间有一个白色菱形),但是背景只会在边缘显示出来。所以基本上,我希望图像上的背景显示它不透明的地方,而不是透明的地方。我几乎可以肯定这与图像有关,但如果您有其他选择,请告诉我。
这是一个例子 http://jsfiddle.net/r7jxm/ .你可以看到所有图像都有白色边缘,应该是透明的,所以下面的图像没有显示出来。最后我仍然需要能够使用 css 更改背景颜色。
最佳答案
它没有最好的支持,但是 CSS masks确实存在。
他们听起来像是会实现您想要的。
关于css - 包含特定形状的背景(如钻石),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9758968/