jQuery和颜色计算 [英] jQuery and colour calculation

问题描述

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

Currently I've got an H1 tag set to a colour of #8c0000 (a deep red).

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

Using jQuery, I would like to get the colour of the H1 and then do a calculation based on the h1's colour to determine what the hex value of a new colour would be if I wanted it several shades darker.

原因这是我想使用CSS3的新的text-shadow属性通过创建一个inset文本阴影创建一个浮雕效果。

The reason for this is that I want to use CSS3's new text-shadow property to create an "embossed" effect by creating an "inset" text shadow.

要获得H1元素的颜色，我相信可以通过使用：

To get the H1 elements colour, I believe, can be done by using:

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

但是我该怎么处理这个值来计算一个更暗的阴影？

But what do I do with that value to calculate a darker shade?

PS - 看到H1颜色将动态设置，我不能只是硬编码在固定文本阴影，这就是为什么我需要计算...

PS - seeing as the H1 color will be set dynamically, I can't just hardcode in a fixed text shadow, which is why I need the calculation...

任何帮助将是非常感激。
提前感谢

Any help would be GREATLY appreciated. Thank you in advance

推荐答案

最简单的方法（不在颜色空间之间转换） $（'h1'）。css（'color'）并减去每个R，G和B的一定金额。主要的问题是jQuery不将这里返回的值归一化，所以我们必须做一点解析。

The simplest method (without converting between color spaces) would be to simply parse the result of $('h1').css('color') and minus off a certain amount off each of R, G and B. The main problem is that jQuery does not normalize the value returned here, so we will have to do a bit of parsing ourselves.

从 getRGB（） /files/jquery.color.js.txt\"> jQuery Color Plugin ，并剥离出第一个和最后一个健全检查以节省空间，我们现在可以获得所需的RGB值。 （如果你使用这些颜色，你可能想要保留最后一个检查和大数组的命名颜色）

Grabbing the getRGB() function from the jQuery Color Plugin, and stripping out the first and last sanity check to save space, we can now obtain the RGB value needed to do this. (You might want to keep the last check and the large array of named colors if you're working with those)

剩下的任务很简单 - 只需构造通过对每个单独的颜色值减去一定量的新颜色，然后再次将它们组合在一起以形成有效的 rgb 值：

The rest of the task is trivial - simply construct the new color by minusing off a certain amount off each individual color value, then joining them back together again to form a valid rgb value:

$('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/

See a simple demo here: http://jsfiddle.net/yijiang/pxqkH/4/

这篇关于jQuery和颜色计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！