Sass中的动态半文本颜色

Question

我不确定这是否可行，我想创建一个可以根据背景设置文本颜色的mixin，如果您只有一种颜色，那么两种颜色似乎很容易，是否可以更改a的颜色一半的文字？

更改带有蓝色背景的文本。

我有一个简单的mixin，但是这个不起作用：

@mixin setColor($bg) {
    @if (lightness($bg) > 50) {
        color: $dark; // Lighter backgorund, return dark color
    } @else {
        color: white; // Darker background, return light color
    }
}

Answer 1

您可以在带有difference的文本上使用mix-blend-mode来达到效果。

div {
  background: linear-gradient(45deg, #fff 0%, 50%, #6ba8e5 51%);
  width: 500px;
  height: 236px;
}

span {
  mix-blend-mode: difference;
  color: #2c2c2c;
  font-size: 2em;
}

<div>
  <span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span></div>