4.1 Các nguyên tắc cơ bản
CSS giúp sử dụng nhiều hình nền trong một phần tử, mở ra nhiều khả năng thú vị để tạo ra hiệu ứng hình ảnh phức tạp. Bằng cách sử dụng thuộc tính background-image và các thuộc tính liên quan, bạn có thể thiết lập nhiều lớp hình nền, điều chỉnh thứ tự, vị trí và các đặc tính khác.
Cú pháp
Để chỉ định nhiều hình nền, ta sử dụng cú pháp với các hình ảnh được liệt kê qua dấu phẩy:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Thuộc tính cho từng lớp
Ngoài background-image, để thiết lập từng lớp hình nền, các thuộc tính sau đây cũng hỗ trợ giá trị đa dạng, phân tách bằng dấu phẩy:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Thứ tự các lớp
Hình ảnh được sắp xếp theo thứ tự liệt kê, trong đó hình ảnh đầu tiên gần người dùng nhất, còn hình ảnh cuối cùng gần phần nền của phần tử nhất.
4.2 Chồng ảnh
Chồng đơn giản các hình ảnh.
Ví dụ sử dụng:
.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;
}
<body>
<div class="multi-bg">Nền nhiều lớp</div>
</body>
Giải thích mã:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: đặt hai hình nềnbackground-position: center, top left;: căn giữa hình đầu tiên và đặt hình thứ hai ở góc trái trênbackground-repeat: no-repeat, no-repeat;: không lặp lại cả hai hình ảnh
4.3 Sử dụng nhiều hình ảnh
Sử dụng nhiều hình nền với các kích thước khác nhau.
Ví dụ sử dụng:
.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;
}
<body>
<div class="multi-bg-sizes">Nền nhiều lớp với kích thước</div>
</body>
Giải thích mã:
background-size: 50% 50%, 30% 30%;: điều chỉnh kích thước hình đầu tiên chiếm 50% chiều rộng và chiều cao phần tử, hình thứ hai chiếm 30%
4.4 Hình ảnh trong suốt
Chồng hình ảnh có độ trong suốt.
Ví dụ sử dụng:
.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);
}
<body>
<div class="multi-bg-opacity">Nền nhiều lớp với độ trong suốt</div>
</body>
Giải thích mã:
background-size: cover, 50%;: điều chỉnh kích thước hình đầu tiên phủ kín phần tử, hình thứ hai chiếm 50% kích thước phần tử::before: phần tử giả thêm một lớp màu đen bán trong suốt lên trên các hình nền
4.5 Cắt nền
Sử dụng các thuộc tính khác với nhiều hình nền.
background-origin và background-clip
Các thuộc tính này điều chỉnh vùng hiển thị hình nền và vùng cắt nền.
Ví dụ sử dụng:
.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;
}
<body>
<div class="multi-bg-origin-clip">Nền nhiều lớp với background-origin và background-clip</div>
</body>
Giải thích mã:
background-origin: padding-box, content-box;: hình đầu tiên bắt đầu từ cạnh trong của padding, hình thứ hai từ nội dung phần tửbackground-clip: border-box, padding-box;: hình đầu tiên được cắt theo cạnh ngoài của border, hình thứ hai theo cạnh trong của padding
GO TO FULL VERSION