Question

我有一个动态着色的div，在div里面有一个文本。我想文本的颜色将是白色或黑色，取决于div的颜色的黑暗。

因此，如果div的颜色为深棕色，我希望文本的颜色为白色。如果div的颜色是黄色，我希望文本的颜色是黑色。

如何使用HTML / CSS / PHP做到这一点？

哈维尔

Answer 1

你是如何设置Div的颜色的？道格所说的延伸......

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

如果您手动设置颜色，请同时添加。

瑞克

Answer 2

此功能将采用任何十六进制颜色，并返回白色或黑色，具体取决于具有更多对比度。

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; ?>

Answer 3

好的，颜色是预先确定的，还是用户会产生颜色？如果你使用预定的颜色，你可以为父母设置课程，孩子现在可以通过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"); 
   }

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

3 个答案: