我来这里寻求一些设计帮助或关于如何改进以下方面的建议：
就像标题说的那样，我有一个网站横幅，其中多个文本显示在不同的图像上作为背景。现在，由于大多数图像都是深色的，我将字体颜色设置为白色。但即便如此，一些文本在一些图像上也不是很可读，例如：
由于我正在使用 CSS，因此我尝试了不同的选项，例如：
添加文本阴影：
CSS：
text-shadow: 3px 3px 0px #000;
也尝试过，在文本周围创建一个半透明框：
我觉得这个盒子看起来不合适。
我为任何了解 CSS 的人创建了一个小提琴。如果没有，请随时根据您的想象力给我建议。
PS：你也可以建议使用不同的字体，如果这样可以帮助它更好地脱颖而出。
作为已经很好的答案的替代方案，如何在文本后面添加一个不透明度为 50% 的黑色 div？
这将允许字体基本上也适用于任何图像。
div {
position:absolute;
top:250px;
left:140px;
width:500px;
height:50px;
background-color:black;
z-index:0;
opacity:0.5;
}
我建议将字体设置为粗体（只是改变粗细，而不是字体本身）并重新指定阴影，以便它定义字母的所有边缘：
font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;
您甚至可以组合多个文本阴影来创建明确的轮廓和模糊效果：
text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
给它一个黑色透明背景和一些填充
背景色：rgba(0,0,0,0.5);
填充：0.5em；
简单地玩一下这些数字，但它应该会给你一个可用的结果。