根据背景颜色更改文本颜色

Posted 2023-03-06

【中文标题】根据背景颜色更改文本颜色

【英文标题】：Change text color based on the background color

【发布时间】：2016-06-02 01:59:44

【问题描述】：

是否可以使用 CSS 或 JS 如果 CSS 无法根据背景颜色动态更改文本颜色？我有一个位于文本下方的图像。我的文字颜色是白色的，但图像上有一个白色的形状。当文本超出白色形状时，我需要将文本颜色更改为较深的颜色。

html：

<div class="biography">
            <img src="http://s16.postimg.org/c09zw94jp/author_photo.png"  class="bio-img">
            <div class="biography-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>
                    Vestibulum pellentesque auctor quam a sollicitudin.<br>
                    Pellentesque accumsan a sem eget dictum.
                </p>
                <p>
                    Morbi dictum lorem tortor, id consequat libero gravida ut.<br>
Nullam dictum sed massa et bibendum.
                </p>
                <p>Praesent sed dui mattis, dictum urna sit amet, imperdiet purus.</p>
                <p> Suspendisse potenti.</p>
            </div>
        </div>

CSS：

body 
  background-color: #7ccbe6;

.biography 
    min-height: 410px;

.biography .biography-text 
    position: relative;
    margin-top: -420px;
    padding: 82px 130px 0 380px;
    z-index: 1;


.biography-text 
    color: #fff;

这里是Codepen 以查看更好的图片。

【问题讨论】：

相关-***.com/questions/35443187/…

【参考方案1】：

对于这类问题，我会使用纯 CSS 解决方案来勾勒文本...

.biography-text 
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #333,
        -1px -1px 0 #333,
        1px -1px 0 #333,
        -1px 1px 0 #333,
        2px 2px 5px rgba(0,0,0,0.65);

根据您的需要更改letter-spacing 和text-shadow 属性的最终指令。

【参考方案2】：

我确实意识到您正在寻找 JS 解决方案。但是，如果有人想要一个 css 解决方案，这里就是一个解决方案 http://codepen.io/hellouniverse/pen/JNwvyL

$bg-color: black;  // This can change
$white : #fff;
$black : #000;

@function set-text-color($color) 
    @if (lightness( $color ) > 50) 
      @return $black; // Lighter color, return black
    
    @else 
      @return $white; // Darker color, return white
    


.text--color 
    background: $bg-color;
    color: set-text-color($bg-color);


// this is here just for demon purpose
.text 
    padding: 10px;
    text-align: center;



<p class="text text--color">I change in color</p>

【讨论】：

是的。我没有注意到你想要 css 解决方案。

@Petroff 在 css 编辑器中（在 CodePen 上）你可以很容易地看到编译好的 css，只需点击箭头按钮（css 编辑器的右上角）然后点击View Compiled CSS .

编译为特定颜色，不能作为“根据背景颜色更改文本颜色”

【参考方案3】：

可能你需要这个：

Change text color based on brightness of the covered background area?

var rgb = [255, 0, 0];

setInterval(function() 
  var c = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  var o = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) / 1000);
  (o > 125) ? $('#bg').css('color', 'black'): $('#bg').css('color', 'white'); //http://www.w3.org/TR/AERT#color-contrast
  $('#bg').css('background-color', c);
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);
, 1000);

JSFiddle

---

更新：

在JSFiddle上使用此示例，只需更改background color

【讨论】：

我看不到如何在我的示例中实现这一点？如果您认为这是一个解决方案，您能帮忙吗？

这对我不起作用，你能在我的例子上试试吗？ Link here

【参考方案4】：

有一些方法可以实现这一点。您可以在（隐藏的）画布上渲染图像并解析图像颜色以了解文本应该是哪种颜色。您也可以对 php 执行相同操作并预处理图像颜色信息。

我还发现了这个可以帮助你的 javascript 库：http://www.kennethcachia.com/background-check/。 （您可以将每个字母包装在 span 元素中，以确定每个字母使用的正确颜色。）