さまざまな画像の背景でテキストが読みにくい

私はここに来て、次の点を改善する方法についての設計の助けやアドバイスを少し求めています。

タイトルが示すように、背景として異なる画像に表示される複数のテキストを含むウェブサイトのバナーを持っています。さて、ほとんどの画像は暗いので、フォントの色を白に設定しました。しかし、それでも、テキストの一部は次のようないくつかの画像ではあまり読めません：

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;

それらの数字を少し試してみてください。しかし、それはあなたに有用な結果を与えるはずです。