4.1 기본 원칙
CSS는 한 요소에서 여러 배경 이미지를 사용할 수 있도록 하여 복잡하고 흥미로운 시각적 효과를 만들 수 있는 다양한 기회를 제공합니다. background-image 및 관련 속성을 사용하여 여러 레이어의 배경 이미지를 설정하고, 그 순서, 위치 및 기타 특성을 제어할 수 있습니다.
구문
여러 배경 이미지를 설정할 때는 이미지들을 쉼표로 구분하여 나열하는 구문을 사용합니다:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
각 레벨을 설정하는 속성
background-image 외에도 각 레이어의 배경 이미지를 설정하기 위해 사용할 수 있는 속성들은 다음과 같으며, 이 속성들도 쉼표로 구분된 여러 값을 지원합니다:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
레이어 순서
이미지는 나열된 순서대로 레이어에 위치하며, 첫 번째 이미지는 사용자가 가장 가까운 곳에 있고, 마지막 이미지는 요소의 배경에 가장 가깝습니다.
4.2 이미지 오버레이
간단한 이미지 오버레이입니다.
사용 예:
CSS
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
HTML
<body>
<div class="multi-bg">다층 배경</div>
</body>
코드 설명:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: 두 배경 이미지를 설정합니다background-position: center, top left;: 첫 번째 이미지를 중앙에, 두 번째 이미지를 왼쪽 상단에 배치합니다background-repeat: no-repeat, no-repeat;: 두 이미지 모두 반복을 비활성화합니다
4.3 여러 이미지 사용
다양한 크기의 여러 배경 이미지를 사용합니다.
사용 예:
CSS
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
HTML
<body>
<div class="multi-bg-sizes">크기가 있는 다층 배경</div>
</body>
코드 설명:
background-size: 50% 50%, 30% 30%;: 첫 번째 이미지는 요소의 50% 너비 및 높이로, 두 번째 이미지는 요소의 30% 너비 및 높이로 조정합니다
4.4 투명한 이미지
투명도가 있는 이미지 오버레이입니다.
사용 예:
CSS
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
HTML
<body>
<div class="multi-bg-opacity">투명도가 있는 다층 배경</div>
</body>
코드 설명:
background-size: cover, 50%;: 첫 번째 이미지는 요소를 완전히 덮도록 조정하고, 두 번째 이미지는 요소 크기의 50%로 조정합니다::before: 이 가상 요소는 배경 이미지 위에 반투명 검정 레이어를 추가합니다
4.5 배경 자르기
다중 배경 이미지에 다른 속성을 사용합니다.
background-origin과 background-clip
이 속성들은 배경 이미지가 표시되는 영역과 배경이 잘리는 영역을 제어합니다.
사용 예:
CSS
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
HTML
<body>
<div class="multi-bg-origin-clip">background-origin과 background-clip이 있는 다층 배경</div>
</body>
코드 설명:
background-origin: padding-box, content-box;: 첫 번째 이미지는 padding의 내부 가장자리에서 시작하고, 두 번째 이미지는 요소의 내용에서 시작합니다background-clip: border-box, padding-box;: 첫 번째 이미지는 경계의 외부 모서리에서 잘리고, 두 번째 이미지는 padding의 내부 모서리에서 잘립니다
GO TO FULL VERSION