目前我的H1标签设置为#8c0000(深红色).
使用jQuery,我想得到H1的颜色,然后根据h1的颜色进行计算,以确定如果我想要几个阴影更暗的新颜色的十六进制值.
原因是我想通过创建“插入”文本阴影来使用CSS3的新文本阴影属性来创建“浮雕”效果.
我相信,要获得H1元素颜色,可以使用：
('H1').css('color');
但是,我该怎么做这个值来计算一个更暗的阴影？
PS – 看到H1颜色将动态设置,我不能只是在固定的文本阴影中硬编码,这就是我需要计算的原因…
任何帮助将不胜感激.
先谢谢你
解决方法
最简单的方法(不在颜色空间之间转换)将简单地解析$(‘h1’).css(‘color’)的结果,减去R,G和B各自的一定量.主要问题是jQuery没有规范化返回的值,所以我们必须自己解析一下.
从jQuery Color Plugin抓取getRGB()函数,并剥离第一个和最后一个健全性检查以节省空间,我们现在可以获得执行此操作所需的RGB值. (如果您正在使用那些,您可能希望保留最后一次检查和大量命名颜色)
剩下的任务是微不足道的 – 只需通过从每个单独的颜色值中减去一定量来构造新颜色,然后再将它们重新连接在一起以形成有效的rgb值：
$('h1').css('text-shadow',function(){
var rgb = getRGB($(this).css('color'));
for(var i = 0; i < rgb.length; i++){
rgb[i] = Math.max(0,rgb[i] - 40);
}
var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
return '0 3px 3px ' + newColor;
});
请在此处查看简单演示：http://jsfiddle.net/yijiang/pxqkH/4/