根據背景顏色設置文本的顏色

我有一個動態着色的div，並且在div內有一個文本。我希望文本的顏色可以是白色或黑色，具體取決於div顏色的黑暗程度。根據背景顏色設置文本的顏色

因此，如果例如div的顏色是深褐色，我想文本的顏色是白色的。如果div的顏色是黃色，我希望文本的顏色爲黑色。

如何用HTML/CSS/PHP做到這一點？

哈維爾

來源

2012-01-24 user1077220

你怎麼設置背景顏色？您應該同時設置前景色。 – Douglas

[如何計算互補色]（http://serennu.com/colour/rgbtohsl.php） – feeela

你是如何設置分區的顏色？什麼道格說延長...

var myDiv = document.getElementById("yourDynamicDiv"); 
myDiv.style.color = "black";

如果你設置顏色手動添加，在同一時間。

裏克

來源

2012-01-24 12:57:04

此功能將採取任何hexcolor並返回白色或黑色取決於什麼有更多的對比。

function TextContrast($hexcolor){ 

$hexcolor = str_replace("#","","$hexcolor"); 

if(!$hexcolor){ 
$hexcolor = "FFFFFF"; 
} 

    $r = hexdec(substr($hexcolor,0,2)); 
    $g = hexdec(substr($hexcolor,2,2)); 
    $b = hexdec(substr($hexcolor,4,2)); 
    $yiq = (($r*299)+($g*587)+($b*114))/1000; 
    if($yiq >= 128){ 
     $text_color = "#000000"; 
     } 
     else{ 
     $text_color = "#FFFFFF"; 
     } 

} // end text contrast function

爲了您的樣式表，你可以改變的CSS擴展.PHP並添加

.custom_div {background: #FF00FF;} 
<?php TextContrast("FF00FF"); ?> 
.custom_div {color: <?php echo $text_color; ?>

來源

2012-01-24 13:05:31 bowlerae

好了，所以，將顏色是預先確定的，否則用戶將產生的呢？如果你打算使用預定的顏色，你可以爲父母設置課程，孩子現在可以通過css進行相應的調整。以下是一個例子。

HTML

<div class="parent"> 
    <div class="child"> Enter Content Here</div> 
</div>

CSS

.black-bg { 
    background:#000000; 
} 

.black-bg div { 
    color:#FFFFFF; 
} 

.white-bg { 
    background:#FFFFFF; 
} 

.white-bg div { 
    color:#000000; 
}

每次你改變對父類，這將迫使瀏覽器重新渲染區域，因此啓用動態造型。

我不知道PHP的，但你可以做到這一點的JS是這樣的：

JS（jQuery的）

if (x === condition-1) { 
     $(".parent").addClass(".black-bg"); 
    } else if (x === condition-2) { 
     $(".parent").addClass(".white-bg"); 
    }

來源

2012-01-24 13:13:24 Ege

根據背景顏色設置文本的顏色

回答

相關問題