パディングを使用して親要素内の兄弟画像/divの重複と同じサイズを実現する方法

Question

画像をカバーする div が必要です。親要素で position:relative を使用し、div で position:absolute を使用して、div が画像を覆うようにできますが、background-color が塗りつぶされます。親要素のパディングにより、親要素が適切にカバーされなくなります。

以下は問題を示すスニペットです。

リーリー リーリー

calc() を使用してパディングを減算することで、かなり近い結果を得ることができます。これはほぼ機能しますが、div の下部のパディングが少し多すぎます。とにかく、私はパディング用に多くの値をハードコーディングしたくないので、たとえそれがうまく機能したとしても、この解決策はあまり好きではありません。

以下は、calc() メソッドを示すスニペットです。

リーリー リーリー

Answer 1

HTML5 を使用する場合、ブラウザは img タグの下部にパディングを追加します。これは、画像をブロックレベル要素として設定することで回避できます。したがって、display: block を .image クラスに追加するだけで準備完了です。

ちなみに、絶対要素の幅/高さを定義するには、calc()を使用する以外に、top、##の4つの値を使用することもできます。 #right 、 bottom、 left を定義します。

リーリー リーリー

Answer 2

このスニペットは少し異なる方法で、オーバーレイ div 内に img を配置し、実際の緑色の低不透明度のオーバーレイをオーバーレイ div の後の疑似要素として使用します。

この方法では、親要素のパディングに関する知識を構築する必要はありません。

リーリー リーリー