根据背景颜色的暗度或亮度设置文本颜色
#demo-element {
background: @theme-color;
color: contrast(@theme-color, black, white, 50%);
}
@theme-color: red;
如果 background-color
是暗的,上面的例子将元素的文本颜色设置为 white
,反之亦然。这是使用 contrast()
颜色操作功能实现的。
对比度函数接受四个参数,其中第一个参数是应该提供输出的参考颜色。参考颜色较浅时应输出的深色和参考颜色较暗时应输出的光。阈值是一个百分比,它定义何时将颜色视为浅色和何时为黑色。
可以在此处找到此示例的演示。