一尘不染

通过百分比CSS(Javascript)动态地将颜色更改为较亮或较暗

css

我们在该网站上有一个庞大的应用程序,并且我们有一些链接,比如我们网站上的蓝色链接就是蓝色。现在,我想建立其他一些链接,但颜色要浅一些。显然,我可以简单地通过在CSS文件中添加十六进制代码来完成此操作,但是我们的站点允许用户确定其自定义配置文件/站点(例如Twitter)所需的颜色。

所以,我的问题是:我们可以按百分比减少颜色吗?

假设以下代码是CSS:

a {
  color: blue;
}

a.lighter {
  color: -50%; // obviously not correct way, but just an idea
}

要么

a.lighter {
  color: blue -50%;  // again not correct, but another example of setting color and then reducing it
}

有没有一种方法可以减少一定百分比的颜色?


阅读 567

收藏
2020-05-16

共1个答案

一尘不染

如果使用的堆栈允许您使用SASS,则可以使用以下lighten函数:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}
2020-05-16