我希望根据背景在浅色到深色之间更改文字颜色。
我想做的事情如下:
[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之间进行更多的颜色切换。
你能帮我找一下相关代码吗?提前谢谢。
答案 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°之间选择任何颜色的漂亮细微差别。
饱和度是从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>
希望这对您仍然有用/有用!干杯!