Как убрать двойную непрозрачность, вызванную использованием псевдоэлементов - PullRequest
Новая
       15

Как убрать двойную непрозрачность, вызванную использованием псевдоэлементов

0 голосов
/ 08 февраля 2020

Я использую псевдоэлементы для динамического рисования сегментов окружностей. Моя проблема сейчас в том, что я хочу использовать непрозрачность 0,7, но когда элементы перекрываются, непрозрачность выше. Что я могу сделать, чтобы иметь одинаковую непрозрачность для перекрывающихся частей? Есть ли способ их стилизовать?

Я использую стилизованные компоненты, но версия stati c выглядит следующим образом: 

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

Если бы у кого-то была идея, я был бы рад узнать. Заранее спасибо.

1 Ответ

1 голос
/ 08 февраля 2020

Хорошо, теперь я вижу проблему. Если вы не хотите, чтобы указанные элементы c были частично непрозрачными между ними, но хотите, чтобы остальные элементы были непрозрачными частично, я рекомендую добавить все эти элементы внутри другого элемента и использовать свойство 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>
...