css背景暗色当中亮,使用javascript在css中生成更亮/更暗的颜色

11 个答案:

答案 0 :(得分：59)

var pad = function(num, totalChars) {

var pad = '0';

num = num + '';

while (num.length < totalChars) {

num = pad + num;

}

return num;

};

// Ratio is between 0 and 1

var changeColor = function(color, ratio, darker) {

// Trim trailing/leading whitespace

color = color.replace(/^\s*|\s*$/, '');

// Expand three-digit hex

color = color.replace(

/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,

'#$1$1$2$2$3$3'

);

// Calculate ratio

var difference = Math.round(ratio * 256) * (darker ? -1 : 1),

// Determine if input is RGB(A)

rgb = color.match(new RegExp('^rgba?\\(\\s*' +

'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +

'\\s*,\\s*' +

'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +

'\\s*,\\s*' +

'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +

'(?:\\s*,\\s*' +

'(0|1|0?\\.\\d+))?' +

'\\s*\\)$'

, 'i')),

alpha = !!rgb && rgb[4] != null ? rgb[4] : null,

// Convert hex to decimal

decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(

/^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,

function() {

return parseInt(arguments[1], 16) + ',' +

parseInt(arguments[2], 16) + ',' +

parseInt(arguments[3], 16);

}

).split(/,/),

returnValue;

// Return RGB(A)

return !!rgb ?

'rgb' + (alpha !== null ? 'a' : '') + '(' +

Math[darker ? 'max' : 'min'](

parseInt(decimal[0], 10) + difference, darker ? 0 : 255

) + ', ' +

Math[darker ? 'max' : 'min'](

parseInt(decimal[1], 10) + difference, darker ? 0 : 255

) + ', ' +

Math[darker ? 'max' : 'min'](

parseInt(decimal[2], 10) + difference, darker ? 0 : 255

) +

(alpha !== null ? ', ' + alpha : '') +

')' :

// Return hex

[

'#',

pad(Math[darker ? 'max' : 'min'](

parseInt(decimal[0], 10) + difference, darker ? 0 : 255

).toString(16), 2),

pad(Math[darker ? 'max' : 'min'](

parseInt(decimal[1], 10) + difference, darker ? 0 : 255

).toString(16), 2),

pad(Math[darker ? 'max' : 'min'](

parseInt(decimal[2], 10) + difference, darker ? 0 : 255

).toString(16), 2)

].join('');

};

var lighterColor = function(color, ratio) {

return changeColor(color, ratio, false);

};

var darkerColor = function(color, ratio) {

return changeColor(color, ratio, true);

};

// Use

var darker = darkerColor('rgba(80, 75, 52, .5)', .2);

var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

现在处理RGB(A)输入，以及十六进制(3位或6位)。

答案 1 :(得分：8)

你可以在悬停时制作部分透明的白色或黑色PNG和覆盖(底衬？)：

div.button {

background-color: #404040;

}

body>div.button:hover {

background-image: url('blackpixel.png');

}

不需要JS。

答案 2 :(得分：3)

function ColorLuminance(hex, lum) {

// validate hex string

hex = String(hex).replace(/[^0-9a-f]/gi, '');

if (hex.length < 6) {

hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];

}

lum = lum || 0;

// convert to decimal and change luminosity

var rgb = "#", c, i;

for (i = 0; i < 3; i++) {

c = parseInt(hex.substr(i*2,2), 16);

c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);

rgb += ("00"+c).substr(c.length);

}

return rgb;

}

答案 3 :(得分：1)

这是一个老问题..但这是我使用替换和拆分的方式。

var CO='' ;

$('#HoverMe').hover(function(){

CO=$(this).css('backgroundColor' );

var CC= $(this).css('backgroundColor').replace('rgb(','').replace(')','').split(',');

var Change=0.2;

var CR=Math.floor((CC[0]*Change)+parseInt(CC[0]));

var CG=Math.floor((CC[1]*Change)+parseInt(CC[1]));

var CB=Math.floor((CC[2]*Change)+parseInt(CC[2]));

$(this).css('background','rgb('+CR+','+CG+','+CB+')');},

function(){

$(this).css('background',CO);

});

答案 4 :(得分：1)

你基本上只需要从R，G，B组件中添加(对于较轻)或减去(对于较暗)等量的数据。

看看Domino 2.0这是一个小型的javascript库。

答案 5 :(得分：1)

我遇到了同样的问题，我解决了以下问题，对某些人有用。对于此解决方案，您需要两个元素，外部元素定义您的颜色，内部元素用于高亮度。在我的情况下，我有这样的事情：

Hi Color

然后在CSS中定义：

.button {

display: inline-block;

background-color: blue;

}

.button a {

display: inline-block;

}

.button a:hover {

background-color: rgba(255,255,255,0.5);

}

答案 6 :(得分：0)

或许jquery.colorhelpers.js缩放和添加功能会有所帮助吗？

我试图找到比在线源代码中找到的更好的例子。

答案 7 :(得分：0)

我找到了一种使用CSS的方法，类似于Wander Nauta的解决方案，但没有使用图像。如果你可以改变html，只需在你想要改变的区域后面放一个div，并将原始颜色设置为背景。然后，您可以使用半透明的白色或黑色背景设置您关注的区域，并且可以使元素变亮或变暗。

我猜它有它的局限性，但它对我很有用。

答案 8 :(得分：0)

答案 9 :(得分：0)

如果您的意思是服务器端JS，那么您可以使用Stylus这是一个CSS预处理器，内置函数可以使颜色更亮/更暗等。

答案 10 :(得分：0)

这只是对eyelidlessness'答案的修改，因为我看了两次相同的函数

var pad = function(num, totalChars) {

var pad = '0';

num = num + '';

while (num.length < totalChars) {

num = pad + num;

}

return num;

};

// Ratio is between 0 and 1

var changeColor = function(color, ratio, darker) {

var difference = Math.round(ratio * 255) * (darker ? -1 : 1),

minmax = darker ? Math.max : Math.min,

decimal = color.replace(

/^#?([a-z0-9][a-z0-9])([a-z0-9][a-z0-9])([a-z0-9][a-z0-9])/i,

function() {

return parseInt(arguments[1], 16) + ',' +

parseInt(arguments[2], 16) + ',' +

parseInt(arguments[3], 16);

}

).split(/,/);

return [

'#',

pad(minmax(parseInt(decimal[0], 10) + difference, 0).toString(16), 2),

pad(minmax(parseInt(decimal[1], 10) + difference, 0).toString(16), 2),

pad(minmax(parseInt(decimal[2], 10) + difference, 0).toString(16), 2)

].join('');

};

var lighterColor = function(color, ratio) {

return changeColor(color, ratio, false);

};

var darkerColor = function(color, ratio) {

return changeColor(color, ratio, true);

};

// Use

var darker = darkerColor('#404040', .2);

var lighter = lighterColor('#404040', .2);