jQuery和颜色计算

最简单的方法(不需要在颜色空间之间转换)是简单地解析 $('h1').css('color') 减去R、G和B中的某个值,主要的问题是jQuery没有规范化这里返回的值,所以我们需要自己做一些解析。

抓住 getRGB() 功能来自 jQuery Color Plugin

剩下的任务很简单-只需通过减去每个单独颜色值的一定量来构造新颜色,然后将它们重新连接在一起,形成一个有效的 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/

您可以简单地使用rgba或hsla值,将alpha减少作为阴影。解析现有的颜色可能是多余的,考虑到已经有标准的CSS属性允许半透明叠加(这可以是你的影子)。

将文本阴影设置为文本本身的颜色,并设置另一个文本阴影,阴影的颜色为半透明、较深,都略高于原始文本。半透明阴影将覆盖在克隆的颜色上,从而产生您所追求的效果:

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有关),但似乎是这样。

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

H S V是不同的颜色空间,其中H值表示色调(颜色),S表示饱和度(丰富度),V表示值(亮度)。对于较暗的阴影,减小V值。减小V值后,将其转换回RGB。然后将其设置为新的颜色值。

下面是一页,介绍如何将RGB转换为HSV: Why doesn't this Javascript RGB to HSL code work?