根据背景颜色设置文本的颜色

我有一个动态着色的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

根据背景颜色设置文本的颜色

回答

相关问题