Question

我正在尝试使用带编号的标签创建一些自定义地图标记。这些标记可以是任何不同的颜色和数字，所以我希望在纯 CSS 中使用标记轮廓的透明 PNG 。我遇到的问题是我在DIV上设置的背景颜色填充了一个矩形区域，但是我需要它来填充标记轮廓边界内的内部区域。我发布了一个显示我的意思的JSFiddle - 为了简单起见我使用了一个基本的星形图标，但实际上我打算使用的标记更复杂，有许多交叉点，角度等。创建的最佳方法是什么具有可变背景颜色的动态标记，而不是在 PNG 精灵中创建所有可能性？

来自JSFiddle：

background-color:red;
background-image: url('data:image/png;base64...)

Answer 1

正如C-link尼泊尔评论的那样，你需要svg。创建起来有点棘手，但它会解决您的问题。

<svg height="300" width="300">
<path style="fill:red;stroke:black;stroke-width:3;fill-rule:nonzero;"  
    d="
        M 100.000 70.000
        L 131.153 92.878
        L 119.021 56.180
        L 150.406 33.622
        L 111.756 33.820
        L 100.000 3.000
        L 88.244 33.820
        L 49.594 33.622
        L 80.979 56.180
        L 68.847 92.878
        L 100.000 70.000"
 />

请查看此fiddle的明星＆＃39;示例

如何在非标准形状的透明PNG背后创建背景色？

1 个答案: