2016-03-30 6 views
1

私は簡単な質問を持っていますが、それは前に回答されていません。背景色がxよりも優れている場合は、色を変更しますか?

私は訪問者がbackground-colorを変更できるようにするオプションを持っている、と私はbackground-colorが暗いと副ときに私のスクリプトが白にフォントcolorを変更することを希望-versa。

phpやjavascript/jqueryでこれを行う簡単な方法はありますか?

(コンセプト)のような多分何か:

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

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

体の背景色? – Flatlineato

+1

'#1599FF == 429'! (16進数99 = 16であるので) 'parseInt(colorString.substring(1,3)、16)+ parseInt(colorString.substring(3,5)、16)+ parseInt(colorString.substring(5,7)、16) = dec 153') –

+1

私はあなたがCSS 3でそれをやって、JSについて忘れていると思う、ここの例http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color – cralfaro

答えて

2

私はその1静的BGCOLORための最も簡単な方法で答えるgavgrifに同意しない、したがって、ユーザが背景として動的な色を選ぶと、その優れた予定されている場合

以下のページで私はより大きな私が作っている場合、私はバックグラウンドのbg値、すなわち平均を取って127.5(平均(255,255,255))のbg値を取得しています。テキストの色には黒があり、テキストの色には白があります。

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です、なぜフィドルが更新されていないように見えるのですか? –

関連する問題