0

我想制作一个 div，它的文本会根据它周围的背景颜色改变颜色。div 中的颜色将在 2 种不同颜色之间变化，我希望文本颜色与这些颜色相反。因此，当背景为白色时，文本为黑色，当背景为黑色时，文本为白色。我目前正在使用“混合混合模式”，但在背景颜色更改之前，我无法让初始文本颜色与背景颜色相反。当我说颜色会改变时，这是我的意思的Codepen 。它不会是像这样的加载条类型的变化，但你明白了。这也是我的模型中的图像。它是横向的，因为文本将在页面上横向。

HTML：

<div class="wrapper">
  <div class="bg">
    <div class="el"></div>
  </div>
</div>

CSS：

.wrapper {
  background-color: rgb(242, 222, 183);
}

$loadingTime: 3s;
$color: rgb(165, 76, 70);

@keyframes loading {
  0% {
    width: 0%;
  } 100% {
    width: 100%;
  }
}

@keyframes percentage { 
  @for $i from 1 through 100 {
    $percentage: $i + "%";
    #{$percentage} {
      content: $percentage;
    }
  }
}

.bg {
  background-color: $color;
  animation: loading $loadingTime linear infinite;
}

.el{
  color: $color;
  width: 200px;
  border: 1px solid $color;

  &:after {
    padding-left: 20px;
    content: "0%";
    display: block;
    text-align: center;
    font-size: 50px;
    padding: 10px 20px;
    color: rgb(242, 222, 183);
    mix-blend-mode: initial;
    animation: percentage $loadingTime linear infinite;
  }
}

html {
  height: 100%;
  background-color: white;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
4

1 回答 1

0

我找到了一个解决方案，它可以让你的文本根据背景颜色反转，我认为这是一个简单的教程。

它使用类似的属性mix-blend-mode: difference;

链接到解决方案

我希望它对您的编码冒险有所帮助

于 2020-04-24T17:20:25.693 回答