如何使用javascript根据背景颜色更改文本颜色?

时间:2016-05-25 11:22:38

标签: javascript jquery html css

我希望根据背景在浅色到深色之间更改文字颜色。

我想做的事情如下:

[background Color] + -------- - Text with Background

所以,如果我选择背景绿色,那么" 带背景的文字"文本颜色可以使用 + -

从浅色切换为深色

我已使用下面的代码。

代码

<input type="range" name="bgopacity" id="bgopacity" value="0" min="0" max="765" step="1" onchange="rangevalue.value=value">

<span class="txtcolor">Text With Background</span>

<script>
    var rval = bval = gval = 0;
    $('#bgopacity').on('change keyup mouseout keypress click mouseenter mouseup', function (value) {

        var valcnt = $(this).val();

        if (valcnt <= 255) {
            rval = valcnt;
            gval = bval = 0;
        } else if (valcnt >= 255 && valcnt <= 510) {
            rval = 255;
            gval = valcnt - rval;
            bval = 0;
        } else if (valcnt >= 510) {
            rval =  gval = 255;
            bval = valcnt - (gval + rval);
        }

        $('.txtcolor').css('color','rgb('+Math.round(rval)+','+Math.round(gval)+','+Math.round(bval)+')');
    });
</script>

此代码运行正常,但只有一些颜色正在发生变化。所以我需要在0到765之间进行更多的颜色切换。

你能帮我找一下相关代码吗?提前谢谢。

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您希望用户选择一种颜色,然后使用一个滑块,允许用户使所选颜色变亮或变暗。

我建议您查看HSL model,而不是 RGB模型(分别为红色,绿色和蓝色0 - 255)。

HSL代表 Hue Saturation Luminosity 。这个CodePen project很好地展示了HSL和RGB的不同之处。

  • Hue 是0° - 360°之间的角度(CSS中的deg后缀是可选的)

    • 它定义了您正在使用的颜色。红色为0°,绿色为120°,蓝色为240°,360°环回红色。您可以在0°和360°之间选择任何颜色的漂亮细微差别。

      hue screenshot

  • 饱和度是从0%到100%的百分比(CSS中带有%后缀)

    • 它定义了颜色的多彩。 100%饱和度意味着颜色处于最大潜力。 0%的饱和度只是一个悲伤的灰色混乱。

      saturation screenshot

  • Luminosity 是从0%到100%的百分比(CSS中带有%后缀)

    • 它定义颜色有多亮,与黑色或白色有多接近。

      luminosity screenshot

CSS中的hsl()用法非常类似于rgb()

element {
    color: hsl(190, 90%, 55%);  /* this is a beautiful cyan color */
}

基本上,在RGB中你必须选择要添加的每种颜色的数量,在HSL中你可以选择什么颜色如何处理它。 / p>

因此,在您的情况下,用户首先会选择H(hue)部分,该部分定义了颜色

然后你可以有一个L(luminosity)的滑块,让用户定义背景颜色的亮度。

以下是您的任务的一个工作示例,但是使用HSL(我也添加了饱和度,但如果不必要,可以轻松删除):

var hue_picker = document.getElementById("hue-picker");
var sat_picker = document.getElementById("sat-picker");
var lum_picker = document.getElementById("lum-picker");
var txt = document.getElementById("txt");
var div = document.getElementById("div");

function filter_input(input, min, max) {
    return Math.max(min, Math.min(input, max))
}

function update_color() {
    // Filter out inputs that are greater than max or lesser than min
    var hue = filter_input(hue_picker.value, 0, 360);
    var sat = filter_input(sat_picker.value, 0, 100);
    var lum = filter_input(lum_picker.value, 0, 100);

    // (background has a fixed 50% luminosity)
    div.style.backgroundColor = "hsl(" + hue + ", " + sat  + "%, 50%)";
    txt.style.color = "hsl(" + hue + ", " + sat  + "%, " + lum + "%)";
    
    // Update the text to display current HSL values
    txt.innerText = "background-color: hsl(" + hue + ", " + sat  + "%, 50%);\n"
                  + "color: hsl(" + hue + ", " + sat  + "%, " + lum + "%);";
}

hue_picker.onchange = hue_picker.oninput = update_color;
sat_picker.onchange = sat_picker.oninput = update_color;
lum_picker.onchange = lum_picker.oninput = update_color;
#div {
    height: 100px;
    width: 300px;
}

#txt {
    font-family: monospace;
}
<input type="range" id="hue-picker" value="0" min="0" max="360" step="1"/>
<input type="range" id="sat-picker" value="100" min="0" max="100" step="1"/>
<input type="range" id="lum-picker" value="75" min="0" max="100" step="1"/>
<div id="div">
    <span id="txt">Text With Background</span>
</div>

希望这对您仍然有用/有用!干杯!