疑似要素を使って、透過した黒色を重ねる方法「rgba(0, 0, 0, 0.4)」の結果

背景に黒を指定して、画像自体を透過させる方法「opacity: 0.7」の結果

背景に黒を指定して、画像自体を透過させる方法「opacity: 0.5」の結果

「display: inline-block;」の代わりに「width:fit-content;」を使った例

画像を背景にした例

画像を背景にし「display: flex;」を使った例

画像を背景にしただけでテキストは重なる