CSS 콘텐츠가 겹치지만 배경은 겹치지 않는 이유는 무엇입니까?

콘텐츠는 겹치지만 배경은 겹치지 않습니다

CSS 내에서 요소의 그리기 순서는 특정 계층 구조를 따릅니다. 요소가 다른 요소와 겹치면 겹치는 요소의 내용이 맨 위에 렌더링됩니다. 그러나 겹치는 요소의 배경은 영향을 받지 않습니다. 대신 초기 위치에 남아 있습니다.

이 동작을 이해하려면 [W3C 페인트 순서 문서](https://www.w3.org/TR/css-Backgrounds-3)를 참조하는 것이 중요합니다. /#the-painting-order). 다음 순서를 설명합니다.

1. 상위 요소의 배경색
2. 상위 요소의 배경 이미지
3. 하위 요소의 콘텐츠(배경 및 테두리 제외)
4. 하위 요소의 배경색
5. 하위 요소의 배경 이미지 요소
6. 하위 요소의 테두리

제공된 코드에서 ".box" 요소의 배경은 포인트 4에 그려져 있습니다. ".bottom" 요소의 배경 포인트 4에도 그려져 있습니다. 그러나 ".bottom" 요소(텍스트)의 내용은 다음 중첩 요소(이 항목의 루트 요소)의 포인트 3까지 그려지지 않습니다. case).

그러므로 텍스트가 ".box" 요소의 배경 뒤에 그려지기 때문에 ".bottom" 요소의 내용이 ".box" 요소의 배경 앞에 있는 것처럼 보입니다. 그러나 ".bottom" 요소의 배경 앞에 있습니다.

이 동작을 수정하려면 ".bottom" 요소에 낮은 불투명도를 적용하면 해당 콘텐츠가 스택 순서로 배경 앞에 배치됩니다. 및 ".box" 요소의 테두리.

위 내용은 CSS 콘텐츠가 겹치지만 배경은 겹치지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!