Question

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

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%;
}

Answer 1

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

它使用诸如mix-blend-mode: difference;

之类的属性

Link to solution

我希望它可以帮助您进行编码冒险

基于背景颜色的文本颜色

1 个答案: