在网页设计中，颜色的搭配是非常重要的。为了保证颜色的可读性，我们通常会使用对比色来突出文本或其他元素。在CSS中，我们可以使用contrast-color函数来生成对比色。但是，这个函数目前还处于实验阶段，还没有得到所有主流浏览器的支持。现在只有Safari Tech Preview版本支持这个函数，其他浏览器还没有支持。
怎么使用
1
2
3
4
5
| .btn {
--background-color: #007bff;
background-color: var(--background-color);
color: contrast-color(var(--background-color));
}
|
现在它只能解析出黑色或者白色，不能解析出其他颜色。这个就比较有点局限了。请下面的示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <style>
.darkmagenta {
--background-color: darkmagenta;
}
.lightpink {
--background-color: lightpink;
}
span {
background-color: var(--background-color);
color: contrast-color(var(--background-color));
}
</style>
<span class="darkmagenta">--background-color: darkmagenta;</span>
<span class="lightpink">--background-color: lightpink;</span>
|
不知道以后这个函数会怎么发展，期待一下。有Safari Tech Preview版本支持这个函数的浏览器，可以动手试试效果。
