Mischmodus in umgekehrten Farben mischen

Question

Ich habe den folgenden Code, in dem, wenn schwarze Segmente schwarze Punkte überlappen, ich die Farbe schwarzer Punkte in Weiß ändern möchte und wenn das Rechteck beim Staubsaugen eines der Punkte die Farbe teilweise ändert, wenn das Segment überlappt. Ich habe versucht, dies im Mix-Blend-Modus zu tun, aber kein Glück. Ich habe versucht, einen Mix-Blend-Modus einzustellen: Unterschied zum schwarzen Segment und Isolation zur Linie. Ähnliches habe ich mit den Dosts versucht.

https://jsfiddle.net/xm87keqh/9/

.month-subsection-news {
  height: 62vh;
  //background-color: blue;
  position: relative;
}

.month-name-news {
  font-size: 36vh;
  position: absolute;
  height: 100px;
  width: 100px;
  top: 5vh;
  //margin-top: ;
  font-family: GothamMedium;
  color: #ededed;
}

.line-timeline {
  width: 100%;
  position: absolute;
  height: 0.1vh;
  top: 54%;
  z-index: 3;
  background-color: black;
  // mix-blend-mode: exclusion;
}

.arrow-left-timeline {
  position: absolute;
  //@at-root: 2vh;
  //width: 2vh;
  left: 10vh;
  top: 47%;
  //background-color:blue
}

.arrow-right-timeline {
  position: absolute;
  //height: 2vh;
  // width: 2vh;
  right: 10vh;
  top: 47%;
  //background-color:blue
}

.dots {
  position: absolute;
  height: 1vh;
  width: 1vh;
  //left: 20vh;
  top: -0.5vh;
  background-color: black;
  z-index: 999;
  border-radius: 100px;
}

.dots1 {
  left: 30vw;
}

.dots2 {
  left: 50vw;
}

.dots3 {
  left: 70vw;
}

.dots4 {
  left: 60vw;
}

.dots5 {
  left: 55vw;
}

// News cards
.news-card {
  font-size: 30px;
  width: 500px;
  margin: 50px;
}

.top-photo-name {
  border-top: 8.7px solid black;
  //width: 75%;
}

.title-news-card {
  margin: 40px 0px 20px 0px;
  font-family: RobotoBold;
  // width: 75%;
}

//End of news apge
.left-nav {
  height: 100vh;
}

.news-page-api {
  min-height: 100vh;
  // height: 100vh;
  //background-color: ;
}

.second-nav-news {
  background-color: white !important;
  border: 5px solid black;
  top: 68.6px;
}

.column-icons-news {
  width: fit-content;
  border: 5px solid black;
}

.font-roboto-medium {
  font-family: robotoMedium;
}

.number-of-news {
  font-size: 311px;
  top: 20vh;
  font-family: robotoMEdium;
}

.margin-article {
  margin-top: 10vh;
}

.news-title-in {
  font-size: 59px;
  font-family: RobotoBold;
}

.news-article-in {
  font-size: 29px;
  font-family: RobotoLight;
  width: 80%;
}

.z-index {
  z-index: 9999;
}

// .date-news{
//   width: 75%;
// }
.img-news img {
  width: 375px;
}

// .img-news{
//   width: 75%;
// }
.news-card {
  width: 375px;
}

.news-cards-section {
  margin-top: 10vh;
}

// .news-page-section{  overflow-x: scroll;
// }
.dots5 a span {
  display: none;
  position: absolute;
  color: #fff;
  background: #000;
  padding: 48px;
  height: 11vh;
  width: 40vh;
  left: -30vh;
}

.dots5 a {
  position: relative;
}

.hover-me:hover span {
  display: block;
  text-align: center;
  clip-path: polygon(50% 0, 100% 41%, 100% 100%, 0 100%, 0 43%);
}

.black-segment {
  height: 7vh;
  width: 30vh;
  position: absolute;
  top: -1.5vh;
  left: 80vh;
  background-color: black;
}

<div class="month-subsection-news">

  <div class="line-timeline">
    <div class="black-segment"></div>

    <div class="dots dots1"></div>
    <div class="dots dots2"></div>

    <div class="dots dots3"></div>

    <div class="dots dots4"></div>

    <div class="dots dots5"> <a class="hover-me" href="#"> a<span >Hello, World!</span></a></div>

  </div>

Erwünschtes Ergebnis

Answer 1

mix-blend-mode funktioniert nicht gut mit schwarz.

Stattdessen sollten Sie lieber Weiß als Standardfarbe verwenden und dann einen invertFilter auf das gesamte Ergebnis anwenden .

Dies bedeutet auch, dass Sie alle definierten Farben im Containerelement manuell invertieren müssen.

Am einfachsten ist es wahrscheinlich, Ihr Rechteck zum Mischelement zu machen. Damit es sich jedoch nicht mit der horizontalen Linie vermischt, benötigen Sie einen neuen Wrapper, der die Isolation definiert.

Hier ist ein vereinfachtes Beispiel:

.line-timeline {
  width: 100%;
  position: absolute;
  height: 5px;
  top: 50px;
  z-index: 3;
  background-color: black;
}
.isolator {
  isolation: isolate;
  filter: invert(100%);
}
.dot {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: -2.5px;
}
.dot.in {
  left: 50px;
}
.dot.out {
  left: 175px;
}
.dots5 a span {
  position: absolute;
  color: #000;
  background: white;
  padding: 48px;
  height: 50px;
  width: 150px;
  display: block;
  text-align: center;
  clip-path: polygon(50% 0, 100% 41%, 100% 100%, 0 100%, 0 43%);
}
.dots5 a {
  position: relative;
}
.black-segment {
  height: 60px;
  width: 150px;
  position: absolute;
  top: -15px;
  background-color: white;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 10;
}

<div class="line-timeline">
  <div class="isolator">
    <!-- we use an isolator to not let our black rectangle mix with the horizontal line -->
    <div class="black-segment"></div>
    <div class="dot in"></div>
    <div class="dot out"></div>
    <div class="dots dots5"> <a class="hover-me" href="#"> a<span >Hello, World!</span></a></div>
  </div>
</div>