主页 / 问题 / 1585527
Accepted
Danila
Asked:2024-06-28 22:22:03 +0000 UTC2024-06-28 22:22:03 +0000 UTC

CSS：将文本叠加在深色背景块上时如何动态反转文本颜色？

  • 772

当您将鼠标悬停在彩色块上时，它会平滑地爬到文本下方。此时块背景上的部分文本有必要将其颜色更改为白色。我尝试了所有选项mix-blend-mode- 它们至少稍微改变了文本颜色hue，saturation但color它远非白色。其余的要么没有效果，要么将文本隐藏在背景下。

如何解决这个问题呢？这有可能吗？无需任何拐杖进行文本复制、打开/隐藏等。

main {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}
.main-text {
  position: relative;
  max-width: 70%;
  /*mix-blend-mode: ;*/
}
.color-block {
    height: 100%;
    width: 100%;
    background-color: #2845AA;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -90%;
    transition: .5s;
}
.color-block:hover {
    right: -40%;
}
<main>
  <div class="color-block"></div>
  <div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.</div>
</main>

html

6 个回答

  1. 我还用渐变和动画制作了这个技巧。当然，它看起来比减法选项更复杂，但它可以完成工作。

    main {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}

.main-text {
  position: relative;
  max-width: 70%;
  background: linear-gradient(to right, black 100%, white 0%);
  -webkit-background-clip: text;
  color: transparent;
  transition: background 0.5s ease;
  /*mix-blend-mode: ;*/
}

.color-block {
  height: 100%;
  width: 100%;
  background-color: #2845AA;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -90%;
  transition: .5s;
}

.color-block:hover {
  right: -40%;
}

.color-block:hover+.main-text {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  animation-name: gradient-animation;
}

@keyframes gradient-animation {
  from {
    background: linear-gradient(to right, black 100%, white 0%);
    -webkit-background-clip: text;
  }
  10% {
    background: linear-gradient(to right, black 95%, white 5%);
    -webkit-background-clip: text;
  }
  20% {
    background: linear-gradient(to right, black 90%, white 10%);
    -webkit-background-clip: text;
  }
  30% {
    background: linear-gradient(to right, black 85%, white 15%);
    -webkit-background-clip: text;
  }
  40% {
    background: linear-gradient(to right, black 80%, white 20%);
    -webkit-background-clip: text;
  }
  50% {
    background: linear-gradient(to right, black 75%, white 25%);
    -webkit-background-clip: text;
  }
  60% {
    background: linear-gradient(to right, black 70%, white 30%);
    -webkit-background-clip: text;
  }
  70% {
    background: linear-gradient(to right, black 65%, white 35%);
    -webkit-background-clip: text;
  }
  80% {
    background: linear-gradient(to right, black 60%, white 40%);
    -webkit-background-clip: text;
  }
  to {
    background: linear-gradient(to right, black 0%, black 57%, white 57%, white 100%);
    -webkit-background-clip: text;
  }
}
    <main>
  <div class="color-block"></div>
  <div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor
    sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.</div>
</main>

    • 7
  2. Best Answer

    您将它们放置在错误的元素上。一般来说，您需要两个叠加层：一个用于蒙版，另一个用于背景。像这样（我没有更改标记）：

    main {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}

.main-text {
  position: relative;
  max-width: 70%;
  z-index: 3;
}

.color-block {
  position: absolute;
  inset: 0 0 0 auto;
  width: 10%;
  transition: .5s;
}

.color-block:hover {
  width: 60%;
}

.color-block::before, .color-block::after {
  content: "";
  position: absolute;
  inset: 0;
}

.color-block::before {
  background: white;
  z-index: 4;
  mix-blend-mode: difference;
}

.color-block::after {
  background: #D7BA55; /* станет #2845AA */
  z-index: 2;
}
    <main>
  <div class="color-block"></div>
  <div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.</div>
</main>

    • 7

  3. 可以分为两部分：

    1. 白色背景上的黑色文本
    2. 蓝底白字

    main {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}

.main-text {
  position: relative;
  max-width: 70%;
  mix-blend-mode: difference;
  color: #ffffff;
}

.white-block {
  height: 100%;
  width: 90%;
  background-color: #ffffff;
  position: absolute;
  transition: .5s;
}

.color-block {
  height: 100%;
  width: 100%;
  background-color: #2845AA;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -90%;
  transition: .5s;
  z-index: 1;
  mix-blend-mode: screen;
}

.color-block:hover {
  right: -40%;
}

.color-block:hover+.white-block {
  width: 40%;
}
    <main>
  <div class="color-block"></div>
  <div class="white-block"></div>
  <div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor
    sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.</div>
</main>

    • 5

  4. 皮影戏怎么样？ :3

    main {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}

.main-text {
  position: relative;
  padding: 0 .5em;
  max-width: 70%;
  line-height: 2;
  text-shadow: .5em 1em 0 white;
  mix-blend-mode: lighten;
}

.main-text::first-line {
  font: 30px bold;
}

#x:checked+.main-text {
  -webkit-text-stroke: 1px gray;
  filter: drop-shadow(0 0 2px skyblue);
}

.color-block {
  height: 100%;
  width: 100%;
  background-color: #2845AA;
  position: absolute;
  top: 50px;
  bottom: 0;
  margin: auto;
  right: -60%;
  transition: .5s;
}

.color-block:hover {
  right: 0;
}
    <main>
  <div class="color-block"></div>
  <input type='checkbox' id='x' checked> <- убрать грязь
  <div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor
    sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.</div>
</main>

    • 2

  5. 可以filter: invert(1)与以下组合使用mix-blend-mode: difference

    PS：如果不添加样式filter: invert(1)，.color-block则块颜色将反转，并使用中指定的文本颜色background-color

    main {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
  filter: invert(1); /* <- тут */
}

.main-text {
  position: relative;
  max-width: 70%;
  color: white;
  mix-blend-mode: difference; /* <- тут */
}

.color-block {
  height: 100%;
  width: 100%;
  filter: invert(1); /* <- тут, не обязательно */
  background-color: #2845AA;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -90%;
  transition: 5s;
}

.color-block:hover {
  right: -40%;
}
    <main>
  <div class="color-block"></div>
  <div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor
    sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.</div>
</main>

    尝试#2：使用background-image: linear-gradientandbackground-clip: text

    .mix-text+.mix-text {
  margin-top: 20px;
}

.mix-text {
  position: relative;
}

.mix-text:hover .box {
  width: var(--to);
}

.mix-text .text {
  color: transparent;
  width: 100%;
  transition: all 2s;
  background-color: white;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mix-text:not(.reverse) .text {
  background-image: linear-gradient(to right, white 50%, black 50%);
  background-position: calc(100% - var(--from)) 0;
}

.mix-text.reverse .text {
  background-image: linear-gradient(to left, white 50%, black 50%);
  background-position: calc(0% + var(--from)) 0;
}

.mix-text:not(.reverse):hover .text {
  background-position: calc(100% - var(--to)) 0;
}

.mix-text.reverse:hover .text {
  background-position: calc(0% + var(--to)) 0;
}

.mix-text .box {
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--from);
  transition: all 2s;
  background: black;
  z-index: -1;
}

.mix-text:not(.reverse) .box {
  left: 0;
}

.mix-text.reverse .box {
  right: 0;
}
    <div class="mix-text" style="--from: 40%; --to: 20%">
  <div class="text">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.
  </div>
  <div class="box"></div>
</div>

<div class="mix-text" style="--from: 40%; --to: 60%">
  <div class="text">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.
  </div>
  <div class="box"></div>
</div>

<div class="mix-text reverse" style="--from: 40%; --to: 20%">
  <div class="text">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.
  </div>
  <div class="box"></div>
</div>

<div class="mix-text reverse" style="--from: 40%; --to: 60%">
  <div class="text">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.
  </div>
  <div class="box"></div>
</div>

    • 2

  6. 这是一项非常艰巨的任务。如果您需要蓝色背景，那么减法在这里没有帮助。我做了这个选项，当然它需要您的修改，并且仅适用于黑色。如果您尝试使用蓝色，则需要从白色中减去黄色，但文本将是黄色的。

    main {
  position: relative;
  margin: 30px 0;
}
.main-text {
  position: relative;
  background:white;
  max-width: 70%;
  /*mix-blend-mode: ;*/
}

  .color-block {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height:100%;
    margin: auto;
    right: -100%;
transition: .5s;
    background: black;
    mix-blend-mode: difference;
  }
.color-block:hover{
    right: -40%;
    z-index:1000;
    background:white;
}
    <main>
  <div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.
  <div class="color-block"></div>
  </div>
</main>

    • 1

相关问题