当相交背景颜色相同时，需要类似 mix-blend-mode 的东西来反转匹配的文本颜色

Question

不知道有没有人能帮帮我。我使用 CSS 网格创建了蒙德里安风格的布局。我有一个已旋转为垂直的标题，它跨越几行并且是粘性的。我想实现一种效果，当一条水平黑线经过 over/under 黑色标题文本时，与该线相交的文本为白色。

我想我需要使用 mix-blend-mode。但到目前为止，我的实验还没有成功。我想知道我是否需要伪造带有 linear-gradient 的水平线作为背景以使其更像图像，尽管我在这方面也失败了！为了更清晰，我在下面添加了一个 jsfiddle：

如有任何帮助，我们将不胜感激。谢谢。

我已经检查了这个答案，但它略有不同，因为它在混合模式下使用了不同的颜色。

* {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #212121;
  background: #fdfdfd;
}

p {
  max-width: 80ch;
}

.flow > * + * {
  margin-top: 1.5rem;
}

.content {
  font-size: 1.125rem;
}

.content__heading {
  position: sticky;
  padding: 1.5rem;
}
.content__heading h2 {
  position: sticky;
  top: 1.5rem;
  font-size: clamp(4.5rem, 20vmin, 7.875rem);
  line-height: 1;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: right;
  /**
   * I'm trying to get the stuck text to be white anywhere
   * the horizontal black line (grid-row: 4) crosses it.
   */
  mix-blend-mode: difference;
}

.content__subheading {
  font-size: 2.25rem;
}

.content__section {
  padding: 1.5rem;
}

.block {
  width: 100%;
  height: 100%;
}

.block--black {
  background: #212121;
  color: #fdfdfd;
}

.block--white {
  background: #fdfdfd;
  color: #212121;
}

.block--blue {
  background: #4e9af9;
  color: #212121;
}

.block--blue-dark {
  background: #28407d;
  color: #fdfdfd;
}

.block--grey {
  background: #d4d4df;
  color: #212121;
}

.block--yellow {
  background: #e6b500;
  color: #212121;
}

.block--red {
  background: #d2241a;
  color: #212121;
}

.block--1 {
  grid-column: 1/4;
  grid-row: 1;
}

.block--2 {
  grid-column: 7;
  grid-row: 1;
}

.block--3 {
  grid-column: 1;
  grid-row: 3;
}

.block--4 {
  grid-column: 7;
  grid-row: 3;
}

.block--5 {
  grid-column: 1;
  grid-row: 5;
}

.block--6 {
  grid-column: 7;
  grid-row: 5;
}

.block--7 {
  grid-column: 1;
  grid-row: 7;
}

.block--8 {
  grid-column: 3;
  grid-row: 7;
}

.line {
  background: #212121;
  width: 100%;
  height: 100%;
}

.line--v {
  grid-row: 1/-1;
}

.line--v--1 {
  grid-column: 2;
}

.line--v--2 {
  grid-column: 4;
}

.line--v--3 {
  grid-column: 6;
}

.line--h {
  grid-column: 1/-1;
}

.line--h--1 {
  grid-row: 2;
}

.line--h--2 {
  grid-row: 4;
}

.line--h--3 {
  grid-row: 6;
}

.line--h--4 {
  grid-row: 8;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 0.625rem auto 0.625rem minmax(43.75rem, 2fr) 0.625rem 1fr;
  grid-template-rows: 5rem repeat(3, 0.625rem auto);
}

.grid__heading {
  grid-column: 3;
  grid-row: 3/6;
}

.grid__section {
  grid-column: 5;
}

.grid__section--1 {
  grid-row: 3;
}

.grid__section--2 {
  grid-row: 5;
}

.grid__section--3 {
  grid-row: 7;
}

<main class="content">
    <div class="grid">
        <span class="line line--v line--v--1"></span>
        <span class="line line--v line--v--2"></span>
        <span class="line line--v line--v--3"></span>
        
        <div class="block block--grey block--1"></div>
        <div class="block block--black block--2"></div>
        
        <div class="grid__heading content__heading">
            <h2>Hello</h2>
        </div>
        <span class="line line--h line--h--1"></span>
        <section class="grid__section grid__section--1 content__section block block--blue-dark flow">
            <h3 class="content__subheading">Subheading 1</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure, soluta eius? Repudiandae nihil doloremque provident debitis laborum beatae laboriosam atque deserunt dicta excepturi, eius dolorem ab ducimus. Quibusdam, odio beatae.</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias maiores architecto nemo harum quia aperiam, voluptatem error et quaerat dolorum delectus a rem fuga quae sint inventore laboriosam commodi provident?</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta alias eos, non deleniti necessitatibus similique at tempora animi perferendis provident sit unde accusamus fugiat totam modi nostrum? Unde, neque accusamus.</p>
        </section>
        
        <div class="block block--red block--3"></div>
        <div class="block block--yellow block--4"></div>
        <div class="block block--red block--5"></div>
        <span class="line line--h line--h--2"></span>
        <section class="grid__section grid__section--2 content__section flow">
            <h3 class="content__subheading">Subheading 2</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos et voluptate obcaecati quasi nobis aliquam, voluptates esse expedita ullam dolores quae rem itaque cupiditate nam recusandae quia ipsam praesentium omnis!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam natus asperiores delectus tenetur facere id provident nobis! Sit blanditiis debitis, recusandae assumenda laboriosam quis commodi amet, doloribus eveniet molestiae minima.</p>
        </section>
        <div class="block block--grey block--6"></div>
        
        <div class="block block--black block--7"></div>
        <div class="block block--yellow block--8"></div>
        <span class="line line--h line--h--3"></span>
        <section class="grid__section grid__section--3 content__section block--yellow flow">
            <h3 class="content__subheading">Subheading 3</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere atque ad vitae nobis asperiores velit eligendi architecto, maiores reprehenderit dolore et pariatur nihil quo, provident, possimus eaque sint dolor placeat!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate natus vero quaerat expedita facere neque repellendus dolor perspiciatis ullam incidunt aliquid amet illo eligendi, totam possimus aspernatur, sequi ipsam voluptatum!</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima ullam error sint quae! Numquam provident suscipit cum saepe quas vel delectus distinctio, magni, expedita nam sunt perferendis similique laborum eum.</p>
        </section>
        <span class="line line--h line--h--4"></span>
    </div>
</main>

Answer 1

您需要将 mix-blend-mode 应用于父元素和颜色：白色（在文本上）以应用所需的效果。请记住，如果您不使用黑色 (#000) 或白色 (#fff)，由于混合，您可能无法获得开始使用的颜色。

我的解决方案：

.content__heading {
  position: sticky;
  padding: 1.5rem;
  mix-blend-mode: difference;
}

.content__heading h2 {
  position: sticky;
  top: 1.5rem;
  font-size: clamp(4.5rem, 20vmin, 7.875rem);
  line-height: 1;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: right;
  /* add color white to achieve the right inversion */
  color: white;
}

当相交背景颜色相同时，需要类似 mix-blend-mode 的东西来反转匹配的文本颜色

Need something like mix-blend-mode to invert matching text color when intersecting bg color is the same

css

mix-blend-mode