Sass 中的动态半文本颜色答案

【问题标题】：Dynamic half text color in SassSass 中的动态半文本颜色
【发布时间】：2019-01-20 23:20:12
【问题描述】：

我不确定这是否可行，我想创建一个 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
    }
}

【问题讨论】：

已编辑，我是第一次使用 sass..
css-tricks.com/methods-contrasting-text-backgrounds
这个函数只有一个输入参数，你怎么给它传递两种颜色呢？关于is it executable to change a color of a half of a text？不，如果它是一个元素。

标签： html css sass styles

【解决方案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>

【讨论】：