オーバーレイ画像を画像境界内に保ちます - 画像にのみ貼り付くように制限します

Question

画像にオーバーレイを貼り付けようとしていますが、このオーバーレイは上部のメニュー バーにまで広がっており、画像に貼り付ける方法がわかりません。

画像のサイズを変更したり、位置を変更したりするさまざまな方法を試しましたが、それでもメニュー バーを超えてしまいました。上部の位置を調整すると全画面表示になるための小さな修正ですが、モバイルではメニューが非表示になるため機能しません。そして、サイズが変更されると、画像の下に流れます。

リーリー リーリー

部品を変更したり、相対位置法を試したりしましたが、何も機能しませんでした。

Answer 1

オーバーレイ .bg-overlay > * のすべての要素ではなく、 position:relative を .bg-image に追加します。

リーリー リーリー