以反转颜色混合混合模式

Question

我有以下代码，当黑色段与黑点重叠时，我想将黑点的颜色更改为白色，并且当您将其中一个点悬停时，如果矩形与段重叠，则会部分改变颜色。我尝试使用 mix-blend-mode 来做到这一点，但没有成功。我正在尝试的是设置混合混合模式：黑色部分的差异和线条的隔离。我用 dosts 尝试过类似的事情。

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>

想要的结果

Answer 1

mix-blend-mode 不适用于黑色。

相反，您应该更喜欢使用白色作为默认颜色，然后对整个结果应用 invert 滤镜。

这也意味着您必须手动反转容器元素内所有定义的颜色。

最简单的方法可能是让矩形成为混合元素，但是，要使其不与水平线混合，您需要一个新的包装器来定义隔离。

这是一个简化的例子：

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

以反转颜色混合混合模式

Mix blend mode in reversing colors

html

css

mix-blend-mode