我正在使用伪元素来动态绘制圆的段。现在的问题是我想使用0.7的不透明度，但是当元素重叠时，不透明度会更高。我该怎么做才能使重叠部分具有相同的不透明度？有样式的方法吗？
我正在使用样式化的组件，但静态版本如下：
.circle {
background-color: #d6dadc;
width: 400px;
height: 400px;
overflow: hidden;
border-radius: 50%;
position: relative;
}
.circle_segment {
height: 100%;
width: 100%;
position: absolute;
overflow: undefined;
background-color: rgba(75, 0, 250, 0.7);
transform-origin: 50% 100%;
transform: translate(-100%, -50%) rotate(90deg);
}
.circle_segment:before {
height: 100%;
content: " ";
width: 100%;
position: absolute;
background-color: rgba(75, 0, 250, 0.7);
transform-origin: center bottom;
transform: translate(0%, -100%) rotate(-90deg)
}
.circle_segment:after {
height: 100%;
width: 100%;
background-color: rgba(75, 0, 250, 0.7);
content: " ";
position: absolute;
opacity: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="circle">
<div class="circle_segment" />
</div>
</body>[如果有人有想法，我很高兴知道。预先谢谢你。
好，我现在看到了问题。如果您不希望特定元素在它们之间是部分不透明的，而是希望其余元素部分不透明，则建议将所有这些元素添加到另一个元素中，并使用opacity CSS属性。因为:before和:after伪元素已经在其“父”元素中，所以您可以简单地修改父级不透明度，如下所示：
.circle {
background-color: #d6dadc;
width: 400px;
height: 400px;
overflow: hidden;
border-radius: 50%;
position: relative;
}
.circle_segment {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: undefined;
opacity: 0.7;
background-color: rgb(75, 0, 250);
transform-origin: 50% 100%;
transform: translate(-100%, -50%) rotate(90deg);
}
.circle_segment:before {
height: 100%;
content: " ";
width: 100%;
position: absolute;
background-color: rgb(75, 0, 250);
transform-origin: center bottom;
transform: translate(0%, -100%) rotate(-90deg)
}
.circle_segment:after {
height: 100%;
width: 100%;
background-color: rgb(75, 0, 250);
content: " ";
position: absolute;
}
.wildelement {
position: absolute;
left: 0px;
top: 190px;
height: 20px;
width: 450px;
background-color: red;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="circle">
<div class="wildelement"></div>
<div class="circle_segment" />
</div>
</body>