我们在网站上有一个很大的应用程序,我们有一些链接,比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接,但是用浅一点的颜色。显然,我可以简单地通过在CSS文件中添加十六进制代码来做,但我们的网站让用户决定他们想要的自定义配置文件/网站(如Twitter)的颜色。
所以,我的问题是:我们能减少百分比的颜色吗?
让我们说下面的代码是CSS:
a {
color: blue;
}
a.lighter {
color: -50%; // obviously not correct way, but just an idea
}
OR
a.lighter {
color: blue -50%; // again not correct, but another example of setting color and then reducing it
}
有没有办法将颜色减少一个百分比?
您可以使用RGBa(“a”是alpha透明度),但它还没有得到广泛支持。不过,它将是,所以你现在可以使用它,并添加一个备用方案:
a:link {
color: rgb(0,0,255);
}
a:link.lighter {
color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
}
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
color: rgba(0,0,255,0.5); /* last value is transparency */
}
您可以使用RGBa(“a”是alpha透明度),但它还没有得到广泛支持。不过,它将是,所以你现在可以使用它,并添加一个备用方案:
a:link {
color: rgb(0,0,255);
}
a:link.lighter {
color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
}
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
color: rgba(0,0,255,0.5); /* last value is transparency */
}
您可以使用一点javascript来计算使用rgb()的较深和较浅的颜色。
提琴:不是很好,但这只是为了说明。
它本质上所做的是设置一个颜色,并选择20个rgb相同数量的颜色(相互比较),仅相隔10个。
for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
var r = 91;
var g = 192;
var b = 222;
$('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+ (i*10)) );
};