css - CSSで、画像の上に背景をホバーする方法

Question

ページにシンプルな<img>画像があり、その上にカーソルを合わせると暗い背景を表示したいと思います。些細なことのように聞こえるものは、アーカイブするのがはるかに難しいようです。

これは私の現在のコードです。位置を設定してもz-index、背景が常にsrc画像の後ろに配置されるという問題。

<style>
  img:hover { 
    background: black;
    z-index: 999;
  }
</style>

<img src="image.jpg" />

これをアーカイブする方法はありますか？

score 3 · Accepted Answer

画像のラッパーに黒い背景を設定して、画像をopacity: 0ホバーさせます。

デモ

HTML：

<div class='wrapper'><img src='image.jpg'></div>

関連するCSS：

.wrapper { background: black; }
.wrapper img:hover { opacity: 0; }

score 1 · Accepted Answer

何をしようとしているのかわかりませんが、画像を黒い四角で覆いたい場合は、背景が背景になることは決してないので、その上に他のオブジェクトを使用する必要があります。