Question

目前我的H1标签设置为＃8c0000（深红色）的颜色。

使用jQuery，我想获得H1的颜色，然后根据h1的颜色进行计算，以确定如果我想要几个阴影颜色更深的新颜色的十六进制值。

原因是我想使用CSS3的新text-shadow属性通过创建“插入”文本阴影来创建“浮雕”效果。

我认为，要获得H1元素的颜色，可以使用：

('H1').css('color');

但是我该用这个值来计算一个更暗的阴影呢？

PS - 看到H1颜色会动态设置，我不能只修复固定的文字阴影，这就是我需要计算的原因......

任何帮助都会非常感激。提前谢谢

Answer 1

最简单的方法（不在颜色空间之间转换）将简单地解析$('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/

Answer 2

您可以简单地使用减少alpha作为阴影的rgba或hsla值。考虑到已经有标准的CSS属性允许半透明叠加（可能是你的影子），解析现有的颜色可能有点过头了。

将文本阴影设置为文本本身的颜色，将另一个文本阴影设置为半透明，颜色较深的颜色，均略高于原始文本。半透明的阴影将覆盖克隆的颜色，产生你想要的效果：

var $h1 = $('h1');

$h1.css('text-shadow', function() {
    return 'rgba(0,0,0,0.7) 0 -1px, '+$h1.css('color')+' 0 -1px';
});

小提琴here。

注意：我不知道为什么需要首先声明叠加阴影（可能与读取R到L的CSS有关），但似乎是这种情况。

Answer 3

这样做的一种方法是获取RGB颜色值，将其转换为HSV - 减小V值，将其转换回RGB然后使用该值。

HSV是一个不同的颜色空间，其中H值表示色调（颜色），S表示饱和度（丰富度），V表示值（亮度）。对于较暗的阴影，请减小V.降低V值后，将其转换回RGB。然后将其设置为新的颜色值。

以下是介绍如何进行RGB到HSV转换的页面：Why doesn't this Javascript RGB to HSL code work?

jQuery和颜色计算

3 个答案: