Question

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

我想做的事情如下：

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

所以，如果我选择背景绿色，那么＆＃34; 带背景的文字＆＃34;文本颜色可以使用 + -

从浅色切换为深色

我已使用下面的代码。

代码

<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之间进行更多的颜色切换。

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

Answer 1

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

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

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

Hue 是0° - 360°之间的角度（CSS中的deg后缀是可选的）
- 它定义了您正在使用的颜色。红色为0°，绿色为120°，蓝色为240°，360°环回红色。您可以在0°和360°之间选择任何颜色的漂亮细微差别。
饱和度是从0％到100％的百分比（CSS中带有%后缀）
- 它定义了颜色的多彩。 100％饱和度意味着颜色处于最大潜力。 0％的饱和度只是一个悲伤的灰色混乱。
Luminosity 是从0％到100％的百分比（CSS中带有%后缀）
- 它定义颜色有多亮，与黑色或白色有多接近。

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>

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

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

1 个答案: