Css 如何消除使用伪元素造成的双重不透明度

我正在使用伪元素动态绘制圆的分段。我的问题是现在我想使用0.7的不透明度，但当元素重叠时，不透明度会更高。我该怎么做才能使重叠部分具有相同的不透明度？有没有一种方法可以给它们定型

我使用的是样式化组件，但静态版本如下所示：

.circle{
背景色：#d6dadc；
宽度：400px；
高度：400px；
溢出：隐藏；
边界半径：50%；
位置：相对位置；
}
.圆圈U段{
身高：100%；
宽度：100%；
位置：绝对位置；
溢出：未定义；
背景色：rgba（75,0250,0.7）；
变换原点：50%100%；
变换：平移（-100%，-50%）旋转（90度）；
}
.圆_段：之前{
身高：100%；
内容：“；
宽度：100%；
位置：绝对位置；
背景色：rgba（75,0250,0.7）；
变换原点：中心-底部；
变换：平移（0%，-100%）旋转（-90度）
}
.圆_段：之后{
身高：100%；
宽度：100%；
背景色：rgba（75,0250,0.7）；
内容：“；
位置：绝对位置；
不透明度：1；
}

---

好的，我现在看到问题了。如果不希望特定元素在它们之间部分不透明，但希望其余元素部分不透明，我建议将所有这些元素添加到另一个元素中，并使用

opacity

CSS属性。因为

：before

和

：after

伪元素已经在其“父”元素中，您可以简单地修改父不透明度，如下所示：

.circle{
背景色：#d6dadc；
宽度：400px；
高度：400px；
溢出：隐藏；
边界半径：50%；
位置：相对位置；
}
.圆圈U段{
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
溢出：未定义；
不透明度：0.7；
背景色：rgb（75,0250）；
变换原点：50%100%；
变换：平移（-100%，-50%）旋转（90度）；
}
.圆_段：之前{
身高：100%；
内容：“；
宽度：100%；
位置：绝对位置；
背景色：rgb（75,0250）；
变换原点：中心-底部；
变换：平移（0%，-100%）旋转（-90度）
}
.圆_段：之后{
身高：100%；
宽度：100%；
背景色：rgb（75,0250）；
内容：“；
位置：绝对位置；
}
.wildelement{
位置：绝对位置；
左：0px；
顶部：190px；
高度：20px；
宽度：450px；
背景色：红色；
}

---

嗨！你能不能，请，创建一个，这样我们就可以看到实际的问题，并复制到一个答案很容易？非常感谢。