如何去除使用伪元素引起的双重不透明

Question

我正在使用伪元素来动态绘制圆段。我现在的问题是我想使用 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>

如果有人有想法，我很乐意知道。提前谢谢你。

Answer 1

好的，我现在明白问题了。如果您不希望特定元素在它们之间部分不透明，但希望与其余元素部分不透明，我建议将所有这些元素添加到另一个元素中并使用 opacity CSS 属性.因为 :before 和 :after 伪元素已经在其 "parent" 元素内部，您可以简单地修改父级不透明度，如下所示：

.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>

如何去除使用伪元素引起的双重不透明

How to remove double opacity caused by use of pseudo elements

css

opacity

pseudo-element

overlapping