Question

我有一个很好的脚本，可以让你改变网站的背景颜色。当我使用LESS CSS时，我可以调整网站不同部分的颜色。例如：

@bgcolor: #bad2e3;

body {
    background-color: @bgcolor;
}
.section {
    background-color: (darken(@bgcolor,10%);
}

当用户选择背景颜色时，我只需拨打less.refreshStyles();，这样就可以了。

我的问题是我需要根据背景颜色改变正文。例如，深色背景颜色需要轻体文本，反之亦然。

我可以将其编码到CSS中，但这意味着为每种可能的背景颜色指定正文文本颜色。

是否有一个函数，要么使用LESS中提供的颜色函数，要么使用jQuery，我可以在哪里检测背景颜色的暗度并在必要时更改正文文本颜色？

举例来说，0to255.com显示依赖于背景颜色的亮/暗文字。

Answer 1

这将返回您身体的背景颜色：

document.body.style.backgroundColor

编辑：对不起误解了这个问题。在此链接get color contrast中，您可以使用javascript检测颜色对比度的功能：

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'light' : 'dark';
}

Answer 2

正如费尔南多所说，你必须计算YIQ。

这是我用于此目的的一个（LESS）函数：

.getContrastYIQ(@color) when (iscolor(@color))
{
    .return_contrast_color(@yiq) when (@yiq >= 128) { color: #000; }
    .return_contrast_color(@yiq) when (@yiq < 128)  { color: #fff; }
    @r: red(@color);
    @g: green(@color);
    @b: blue(@color);
    @yiq: ((@r*299)+(@g*587)+(@b*114))/1000;
    .return_contrast_color(@yiq);
}

用法：

@bgcolor: #bad2e3;
body {
    background-color: @bgcolor;
    .getContrastYIQ(@bgcolor);
}

希望这有帮助。

Answer 3

其他替代方案是LESS

的Guards功能

当你想要匹配表达式而不是简单的值或arity时，防护很有用。如果您熟悉函数式编程，则可能已经遇到过它们。

这或多或少是类似的if / else条件所以使用这样的东西（取自官方的LESS来源）：

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

您可以获得动态CSS生成的好处，更重要的是保持代码更加一致

Answer 4

你可能要求颜色对比。很久以前有一个很好的PHP教程，也许你可以将它抽象为JavaScript：http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_with_php

使用LESS＆amp; jQuery根据背景颜色切换正文文本颜色？

4 个答案: