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

Question

考虑这个例子: 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>

我生成了很多图像，有时浅色文本还可以，但在这种情况下就不行了。

我尝试的是:

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

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

请记住，它应该在许多情况下都有效，而不仅仅是这个，例如深色/浅色背景。 我可以动态地操纵文本的颜色吗？

Answer 1

你可以简单地添加一个深色的text-shadow，无论你使用什么图像，你都会有更好的渲染效果:

.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>