css - 为什么填充不透明度会改变填充的阴影？

Question

我这里有一张 map :http://abehandler.github.io/ (使用 D3 和 Leaflet 创建)

map 具有填充属性设置为红色或蓝色的 SVG 元素。但它显示出三种颜色:红、蓝、紫。我注意到，如果我将填充不透明度设置为 1，那么 map 上的多边形就有正确的阴影。但如果我开始将填充不透明度更改为小于 1，则多边形的阴影开始发生变化。

我想要半透明的多边形——但我不想改变阴影。为什么改变不透明度会改变阴影？我怎样才能防止这种情况发生？

Answer 1

您看到的是背景颜色与多边形的半透明颜色混合。这会产生您看到的新的混合颜色。这很大程度上是设计使然，无法禁用它。

想象一下白色背景上的黑色圆圈 - 当您将其不透明度设置为 0.5 时，可以透过圆圈看到白色背景，最终的颜色为 50% 灰色。

如果您想使用透明度，则无法真正防止这种情况发生，除非您将背景设置为与半透明前景完全相同的颜色。