动态改变颜色为更亮或更暗百分比CSS（Javascript） [英] Dynamically change color to lighter or darker by percentage CSS (Javascript)

问题描述

我们在网站上有一个大的应用程序，我们有几个链接，让我们说蓝色像这个网站上的蓝色链接。现在我想做一些其他链接，但用较浅的颜色。显然，我可以只是通过十六进制代码添加在CSS文件，但我们的网站允许用户决定他们想要的自定义配置文件/网站（如Twitter）的颜色。

We have a big application on the site and we have a few links which are, lets say blue color like the blue links on this site. Now I want to make some other links, but with lighter color. Obviously I can just do simply by the hex code adding in the CSS file, but our site lets user decide what colors they want for their customized profile/site (like Twitter).

因此，我的问题是：我们可以按百分比降低颜色吗？

So, my question is: can we reduce the color by percentage?

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 redcuing it
}

是否有办法按比例减少颜色？

Is there a way to reduce a color by percentage?

推荐答案

如果你使用一个堆栈， =http://sass-lang.com/ =nofollow noreferrer> SASS ，您可以使用 lighten 功能：

If you're using a stack which lets you use SASS, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

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

这篇关于动态改变颜色为更亮或更暗百分比CSS（Javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！