CSS コンテンツは重複するのに背景が重複しないのはなぜですか?

コンテンツは重複しますが、背景は重複しません

CSS 内では、要素の描画順序は特定の階層に従います。要素が別の要素と重なる場合、重なっている要素のコンテンツが上に表示されます。ただし、重なっている要素の背景は影響を受けません。代わりに、初期位置に残ります。

この動作を理解するには、[W3C ペイント オーダーのドキュメント](https://www.w3.org/TR/css-backgrounds-3)を参照することが重要です。 /#the-painting-order)。以下の順序で説明します。

1. 親要素の背景色
2. 親要素の背景画像
3. 子要素の内容 (背景と枠線を除く)
4. 子要素の背景色
5. 子の背景画像element
6. 子要素の境界線

提供されたコードでは、「.box」要素の背景がポイント 4 で描画されます。「.bottom」要素の背景ポイント 4 でも描画されます。ただし、「.bottom」要素の内容 (テキスト) は、次のネストされた要素 (この要素のルート要素) のポイント 3 まで描画されません。 case).

したがって、テキストは「.box」要素の背景の後に描画されるため、「.bottom」要素のコンテンツは「.box」要素の背景の前にあるように見えます。

この動作を変更するには、「.bottom」要素に低い不透明度を適用します。これにより、コンテンツが背景と前に重なり順に配置されます。 「.box」要素の境界線。

以上がCSS コンテンツは重複するのに背景が重複しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。