jQuery和颜色计算

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 属性允许半透明覆盖（可以是你的阴影），解析现有的颜色可能是多余的。

将 text-shadow 设置为文本本身的颜色，以及另一个在其上带有半透明、较暗颜色的 text-shadow，两者都略高于原始文本。半透明阴影将覆盖克隆的颜色，创建您想要的效果：

var $h1 = $('h1');

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

现场小提琴here.

注意：我不知道为什么需要先声明覆盖阴影（可能与 CSS 读取 R 到 L 有关），但似乎是这样。

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?