考虑这个例子：codepen https://codepen.io/anon/pen/EdwKZb
.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- 没有帮助
某事喜欢：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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
