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