画像をカバーする div が必要です。親要素で position:relative を使用し、div で position:absolute を使用して、div が画像を覆うようにできますが、background-color が塗りつぶされます。親要素のパディングにより、親要素が適切にカバーされなくなります。
以下は問題を示すスニペットです。
リーリー リーリー
calc() を使用してパディングを減算することで、かなり近い結果を得ることができます。これはほぼ機能しますが、div の下部のパディングが少し多すぎます。とにかく、私はパディング用に多くの値をハードコーディングしたくないので、たとえそれがうまく機能したとしても、この解決策はあまり好きではありません。
以下は、calc() メソッドを示すスニペットです。
リーリー リーリー
P粉4222270232023-09-13 00:53:20
HTML5 を使用する場合、ブラウザは img タグの下部にパディングを追加します。これは、画像をブロックレベル要素として設定することで回避できます。したがって、display: block を .image クラスに追加するだけで準備完了です。
ちなみに、絶対要素の幅/高さを定義するには、calc()を使用する以外に、top、##の4つの値を使用することもできます。 #right 、 bottom、 left を定義します。
P粉5417963222023-09-13 00:18:45
このスニペットは少し異なる方法で、オーバーレイ div 内に img を配置し、実際の緑色の低不透明度のオーバーレイをオーバーレイ div の後の疑似要素として使用します。
この方法では、親要素のパディングに関する知識を構築する必要はありません。