更改文本的颜色以响应背景色

问题描述

请考虑以下示例: codepen

.infobox {
  width: 110mm;
  height: 65mm;
  background-image: url(https://i.pinimg.com/564x/86/70/f2/8670f2ab34bf4082bf3cef004aae0826.jpg);
  background-size: cover;
  position: relative;
}

.text {
  position: absolute;
  bottom: 0;
  text-align: center;
  color: white;
}

<div class="infobox">
  <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel quam in enim pulvinar fringilla. Etiam molestie convallis pharetra. Sed et tortor tortor. Vestibulum ligula ex, rhoncus semper metus ut, hendrerit porttitor risus. Quisque at porta magna. Phasellus vel vulputate diam. Maecenas sem est, aliquet nec odio euismod, posuere luctus nisl. Vestibulum posuere iaculis massa, sed cursus dui pellentesque sed.</span>
</div>

我生成许多图像，有时浅色文字是可以的，但在这种情况下不是.

I generate many of images and sometimes light text is ok, but in this case it is not.

我尝试过的是:

1. mix-blend-mode-没有帮助

像:filter: invert(1) grayscale(1) contrast(16) drop-shadow(.05em .05em orange);

请记住，它不仅应在许多情况下都有效，例如深色/浅色背景.我可以动态地处理文本的颜色吗?

Remember that it should work in many cases not only this one e.g. dark/light background.Can i manipulate color of text dynamicly?

推荐答案

您可以简单地添加深色的text-shadow，这样您可以更好地渲染将要使用的图像:

You may simply add a text-shadow with a dark color and you will have a better rendring whataver the image you will use:

.infobox {
    width: 110mm;
    height: 65mm;
    background:
    linear-gradient(to bottom,transparent,#fff),
    url(https://i.pinimg.com/564x/86/70/f2/8670f2ab34bf4082bf3cef004aae0826.jpg);
  background-size: cover;
  position: relative;
}

.text {
  position: absolute; bottom: 0; 
  text-align: center; color: white;
  text-shadow: -1px 0 1px #000,
               1px 0 1px #000,
               1px 1px 1px #000,
               -1px -1px 1px #000,
               0 1px 1px #000,
               0 -1px 1px #000;
}

<div class="infobox">
  <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel quam in enim pulvinar fringilla. Etiam molestie convallis pharetra. Sed et tortor tortor. Vestibulum ligula ex, rhoncus semper metus ut, hendrerit porttitor risus. Quisque at porta magna. Phasellus vel vulputate diam. Maecenas sem est, aliquet nec odio euismod, posuere luctus nisl. Vestibulum posuere iaculis massa, sed cursus dui pellentesque sed.</span>
</div>

这篇关于更改文本的颜色以响应背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！