rgba 不适用于 CSS 中的填充属性答案

【问题标题】：rgba doesn't work for fill property in CSSrgba 不适用于 CSS 中的填充属性
【发布时间】：2021-06-15 13:41:57
【问题描述】：

circle {
    fill: rgba(248, 248, 248, 0.5);
}

<svg width='400' height='400'>
    <circle r='100' cx='200' cy='200'></circle>
</svg>

rgb 代码适用于此，但我发现 rgba 不起作用。形状变得不可见。我在 Chrome 和 Firefox 上对此进行了测试。

我在这里错过了什么吗？

【问题讨论】：

它对我有用，但你的圆圈在白色背景下是如此苍白，基本上是不可见的。
在您的情况下，颜色是非常浅的灰色 - 几乎是白色。这就是它 seam 不起作用的原因。如果您将颜色更改为 fill: rgba(248, 0, 0, 0.5); 之类的其他颜色，您会看到它有效

标签： css svg rgb

【解决方案1】：

这个圆圈几乎是白色的，也是部分透明的，你只是在白色背景下看不到它。

在黑色背景上，您可以看到它在 Firefox 和 Chrome 上都可以完美呈现...

svg {
    background-color: black;
}

circle {
    fill: rgba(248, 248, 248, 0.5);
}

<svg width='400' height='400'>
    <circle r='100' cx='200' cy='200'></circle>
</svg>

【讨论】：