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

考虑以下示例:
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>

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

我试过的是:

mix-blend-mode-没有帮助

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

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

最佳答案

您可以简单地添加深色的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>

关于html - 更改文本的颜色以响应背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52797638/