2016-03-30 77 views
1

我有一個簡單的問題,但之前一直沒有得到答覆:如果背景顏色優於x,則更改顏色?

我有一個選項,讓遊客改變background-color,我想,我的腳本改變字體color計白當background-color是黑暗和副-versa。

有什麼簡單的方法可以做到這一點在PHP或JavaScript/jQuery的?

也許像(概念):

#1599FF == 15 + 99 + 255 == 369; 

369/((255*3)/2) == 369/382.5 == bright; 
+0

身體的背景顏色? – Flatlineato

+1

'#1599FF == 429'!嘗試'parseInt(colorString.substring(1,3),16)+ parseInt(colorString.substring(3,5),16)+ parseInt(colorString.substring(5,7),16)'(因爲'十六進制99 = = dec 153') –

+1

我認爲你可以用CSS 3來做,而忘記JS,這裏是一個例子http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color – cralfaro

回答

2

我不同意gavgrif回答靜態的bgcolor最簡單的方法它的一個,因此,如果用戶打算挑動態顏色作爲背景,然後它能夠​​更好地根據

改變文字顏色在下面JS小提琴在頁面加載時我得到取其平均值,並與127.5對比(平均即(255,255,255))的背景,即RGB(220110140)的血糖值,如果其更大的我在寫文字顏色有黑色其他文字顏色有白色

https://jsfiddle.net/swaminathang/ezg47hag/2/

<div id="bgblock" > 
<h1 id="textColor"> 
Hello world 
</h1> 

</div> 

#bgblock{ 
width:400px; 
    height:200px; 
    background-color:#000000; 
} 

$(document).ready(function() { 
var bgColorString , hexvalue,hexvalue1,hexvalue2,hexvalue3 
bgColorString = $("#bgblock").css('backgroundColor').toString(); 
hexvalue = bgColorString.split("(")[1].split(")")[0] 

hexvalue1 = parseInt(hexvalue.split(",")[0]) ; 
hexvalue2 = parseInt(hexvalue.split(",")[1]) ; 
hexvalue3 = parseInt(hexvalue.split(",")[2]) ; 

var coloravg = (hexvalue1 + hexvalue2+hexvalue3)/3; 
if(coloravg > 127.5){ 
$("#textColor").css("color","black"); 
}else{ 
$("#textColor").css("color","white"); 
} 


}); 
+0

Yess完美!你的答案是goog,爲什麼不把它粘貼到小提琴上,因爲小提琴似乎沒有被更新? –