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

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"); 
   }