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

Question

是否可以使用CSS或JS根据背景颜色动态更改文本颜色？我的一张图片置于文字下方。我的文本颜色是白色，但图像上有一个白色的形状。当文本在白色形状之上时，我需要将文本颜色更改为较暗的颜色。

HTML：

<div class="biography">
            <img src="http://s16.postimg.org/c09zw94jp/author_photo.png" alt="author" 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，可以更好地看到图片。

- Vadim Badea

---

相关- http://stackoverflow.com/questions/35443187/how-do-i-determine-background-color-of-visible-underlying-element/35444374#35444374 - Paulie_D

Answer 1

我知道你在寻找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>

- user8028403

---

真的。我没有注意到你想要CSS解决方案。 - user8028403

@Petroff 在 CSS 编辑器（在 CodePen 上）中，您可以轻松查看已编译的 CSS，只需单击箭头按钮（CSS 编辑器的右上角），然后单击“查看已编译的 CSS”。 - Mehdi Dehghani

那是编译成了特定的颜色，它不能实现“根据背景颜色改变文本颜色”的功能。 - Alynva

Answer 2

也许你需要这个：

基于覆盖背景区域的亮度改变文本颜色？

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上使用此示例，只需更改背景色即可。

- Pedram

---

我不知道如何在我的示例中实现这个功能，你能帮忙看看是否有解决方案吗？ - Vadim Badea

对我来说它不起作用，你能否在我的示例上尝试一下？链接在这里 - Vadim Badea

Answer 3

针对这种问题，我会使用纯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属性的最终指令。

- Brian Peacock

Answer 4

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

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

- Terrabythia