文字在不同的图像背景上不太可读

我来这里寻求一些设计帮助或建议，以帮助我改善以下方面：

就像标题说的那样，我有一个网站横幅，其中在不同图像上以背景显示多个文本。现在，由于大多数图像都是深色的，因此我将字体颜色设置为白色。但是即使这样，在一些图像上，某些文本还是不太可读：

由于我使用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;

只需稍微处理一下这些数字，但这应该会为您提供可用的结果。