如何使用javascript根據背景顏色更改文本顏色？

我想根據背景更輕到更深的顏色更改文本顏色。如何使用javascript根據背景顏色更改文本顏色？

我想下面做：所以在這裏，如果我選擇

[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之間的顏色切換。

您能否幫我找出相關的代碼？提前致謝。

來源

2016-05-25 Mukesh Ram

如果我理解正確，您希望讓用戶選擇一種顏色，並在此之後，有一個滑塊，允許用戶減輕或加深所選的顏色。

而不是RGB模型（0 - 255分別爲紅色，綠色和藍色），我建議你檢查HSL model。

HSL代表色調，飽和和光度。這個CodePen project很好地展示了HSL和RGB的區別。

的色調是從0°角 - 360°（deg後綴CSS是可選的）
- 它定義您正在使用什麼顏色。紅色在0°，綠色在120°，藍色在240°，在360°時回到紅色。您可以在0°和360°之間選擇任何顏色的細微差別。
的飽和爲0％的百分比爲100％（用CSS的%後綴）
- 它定義如何五顏六色顏色是。 100％飽和度意味着顏色處於最佳狀態。 0％飽和度只是一個悲傷的灰色混亂。
的光度爲0％的百分比爲100％（用CSS的%後綴）
- 它定義有多亮顏色是，黑色或白色有多接近。

CSS中的hsl()用法非常相似rgb()的：

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

基本上，RGB，你必須挑選每種顏色的量加起來，在HSL你可以選什麼顏色和怎麼辦呢。

所以，在你的情況下，用戶會先選擇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>

希望這對您仍然相關/有用！乾杯!

來源

2017-02-28 04:53:27

如何使用javascript根據背景顏色更改文本顏色？

回答

相關問題