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

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);

请记住，它应该适用于许多情况，而不仅仅是这一个，例如黑/白色背景。我能动态地操纵文本颜色吗？

- tryingHard

---

你必须使用JavaScript来实现这个功能 - 在CSS中无法实现。 - Jack Bashford

@JBDouble05，你能告诉我你在想什么解决方案吗（例如，发布一个答案）？ - tryingHard

你需要做的是捕捉文本将要放置的区域，确定它是“暗”还是“亮”，然后改变文本的颜色。 - Jack Bashford

@JBDouble05 但请记住，这段文本是一个整体 - 在一张图片中，区域有时会很暗，有时会很亮（当长文本被放置时）。 - tryingHard

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>

- Temani Afif

Answer 2

另一个解决方案可能是使您的图像变暗。

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

.infobox:before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.4);
}

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

- Quentin Veron