css - 在 CSS 中使用 mix-blend-mode 时如何确定文本的颜色？

Question

在 CSS 中使用 mix-blend-mode 时如何更改文本的颜色？

这是代码：https ://jsfiddle.net/1nyah2zf/

是）我有的：

我想要的是：

谢谢 ！

code

标签： css

Answer 1

我不认为 mix-blend-mode 会是你需要的：

从您的示例中，您可以使用背景附件来执行此操作：

这个想法的例子：

body {
  margin: 0;
  display: flex;
}

.left {
  width: 200px;
  height: 200px;
  background: green;
}

.right {
  width: 200px;
  height: 200px;
  background: url('https://www.illicoveto.com/wp-content/uploads/sacre-de-birmanie.jpg');
  background-size: 200px;
}

.text {
  position: absolute;
  left: 100px;
  top: 70px;
  font-size: 50px;
  animation-name: animation;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  background: linear-gradient(90deg, black 200px, white 200px) fixed;
  color: transparent;
  background-clip: text;
}

@keyframes animation {
  0% {
    left: 100px;
  }
  50% {
    left: 140px;
  }
  100% {
    left: 100px;
  }
}

<div class="left"></div>
<div class="right"></div>
<div class="text">HELLO!</div>

没有背景附件，然后只移动文本