CSS - Nhiều nền

Xin chào các bạn đang theo đuổi nghề thiết kế web! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới thú vị của CSS với nhiều nền. Là giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua hành trình này với rất nhiều ví dụ và giải thích. Vậy, hãy lấy饮料 yêu thích của bạn, và chúng ta cùng bắt đầu!

Cú pháp

Trước khi chúng ta nhảy vào phần sâu hơn, hãy bắt đầu từ cơ bản. Cú pháp để sử dụng nhiều nền trong CSS rất đơn giản:

selector {
background: background1, background2, ..., backgroundN;
}

Mỗi nền được ngăn cách bởi một dấu phẩy, và chúng được층 từ trên xuống dưới. Nền đầu tiên bạn liệt kê sẽ ở trên cùng, và nền cuối cùng sẽ ở dưới cùng. Đó như việc stacking pancake - cái bạn đặt lên đĩa đầu tiên sẽ nằm ở trên cùng!

CSS Nhiều nền - Sử dụng thuộc tính background-image

Hãy bắt đầu với một ví dụ đơn giản sử dụng thuộc tính background-image:

.multi-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-repeat: no-repeat, repeat;
background-position: center center, top left;
}

Trong ví dụ này, chúng ta đang áp dụng hai nền hình ảnh cho một phần tử. top-image.png sẽ được đặt ở trên cùng và không lặp lại, trong khi bottom-image.png sẽ nằm dưới nó và lặp lại. Hình ảnh trên sẽ được đặt ở giữa, và hình ảnh dưới sẽ bắt đầu từ góc trên bên trái.

CSS Nhiều nền - Sử dụng thuộc tính background-size

Bây giờ, hãy xem cách chúng ta có thể kiểm soát kích thước của nền hình ảnh:

.sized-bg {
background-image:
url('small-icon.png'),
url('large-pattern.png');
background-size: 50px 50px, cover;
background-repeat: no-repeat, repeat;
background-position: top right, center;
}

Ở đây, chúng ta đang đặt kích thước của small-icon.png thành 50x50 pixel, trong khi large-pattern.png sẽ che kín toàn bộ phần tử. Điều này rất tuyệt vời cho việc kết hợp một logo hoặc biểu tượng nhỏ với một mẫu nền lớn hơn.

CSS Nhiều nền - Sử dụng thuộc tính background

Thuộc tính viết tắt background cho phép chúng ta đặt tất cả các thuộc tính nền cùng một lúc:

.shorthand-bg {
background:
url('top-layer.png') no-repeat center / 100px,
linear-gradient(to bottom, #f00, #00f) no-repeat center / cover;
}

Ví dụ này kết hợp một hình ảnh với nền渐变. Hình ảnh được đặt ở giữa và có kích thước 100px, trong khi nền渐变 che kín toàn bộ phần tử. Đó như việc đặt một cherry trên đỉnh một sundae nhiều màu sắc!

CSS Nhiều nền - Ảnh cỡ đầy đủ

Đôi khi, bạn muốn một hình ảnh che kín toàn bộ nền:

.full-size-bg {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('landscape.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}

Điều này tạo ra một nền hình ảnh cỡ đầy đủ với một lớp mờ bán trong suốt. Nó rất phù hợp để tạo ra các phần hero hoặc nền full-page ấn tượng.

CSS Nhiều nền - Ảnh hero

Nói về các phần hero, đây là cách bạn có thể tạo ra một phần hero:

.hero-bg {
background:
linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
url('hero-image.jpg') no-repeat center center / cover;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
color: white;
}

Điều này tạo ra một phần hero với nền hình ảnh và lớp渐变 che phủ từ trái sang phải. Nó như việc tạo ra sân khấu cho lễ khai trương lớn của trang web của bạn!

CSS Nhiều nền - Sử dụng thuộc tính background-origin

Thuộc tính background-origin xác định vị trí của hình ảnh nền:

.origin-bg {
background-image: url('pattern.png');
background-origin: content-box, padding-box, border-box;
background-repeat: no-repeat;
border: 10px dashed black;
padding: 20px;
}

Thuộc tính này đặc biệt hữu ích khi bạn muốn kiểm soát chính xác nơi nền bắt đầu liên quan đến mô hình hộp của phần tử.

CSS Nhiều nền - Sử dụng thuộc tính background-clip

Thuộc tính background-clip xác định nền nên kéo dài đến đâu:

.clip-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-clip: content-box, padding-box;
border: 10px solid rgba(0,0,0,0.5);
padding: 20px;
}

Điều này cho phép bạn clip nền ở các phần khác nhau của mô hình hộp, tạo ra các hiệu ứng층 thú vị.

CSS Nhiều nền - Các thuộc tính liên quan

Dưới đây là bảng các thuộc tính liên quan bạn có thể sử dụng với nhiều nền:

Thuộc tính	Mô tả
background-image	Đặt một hoặc nhiều nền hình ảnh
background-position	Đặt vị trí bắt đầu của mỗi nền hình ảnh
background-size	Xác định kích thước của nền hình ảnh
background-repeat	Đặt cách nền hình ảnh được lặp lại
background-origin	Xác định khu vực định vị của nền hình ảnh
background-clip	Xác định nền nên kéo dài đến đâu trong phần tử
background-attachment	Đặt nền hình ảnh có cuộn cùng phần còn lại của trang hay cố định

Nhớ rằng, bạn có thể sử dụng các thuộc tính này riêng lẻ hoặc kết hợp chúng trong thuộc tính viết tắt background để có mã gọn hơn.

Và đó là tất cả, các bạn! Bây giờ bạn đã được trang bị kiến thức để tạo ra những nền nhiều lớp ấn tượng trong CSS. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngại thử nghiệm với các thuộc tính này. Ai biết được? Bạn có thể sẽ tạo ra xu hướng lớn tiếp theo trong thiết kế web!

Chúc các bạn may mắn và nền của bạn luôn được층 hoàn hảo!

Credits: Image by storyset