여러 배경 레이어와 크기·위치를 조합합니다.
background-image에는 쉼표로 여러 레이어를 쌓을 수 있으며 먼저 적은 이미지가 위에 옵니다. 각 레이어마다 position, size, repeat를 같은 순서로 지정합니다.
이번 예제의 출발점은 background-image: image1, image2;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 두 배경 레이어의 순서를 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
복잡한 배경 위 텍스트는 대비가 일정하지 않을 수 있습니다.
직접 바꿔보세요두 배경 레이어의 순서를 바꿔보세요.