Change color of text responding to background color

Question

Consider this example: 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.

What i tried was:

1. mix-blend-mode - did not help

2. Sth like: 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?

Answer 1

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>

Answer 2

Another solution could be to make your image darker.

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