动态改变颜色为更亮或更暗百分比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屋!