Trong CSS, thuộc tính background được sử dụng để điều chỉnh nền của các phần tử HTML. Thuộc tính background có thể được sử dụng để đặt màu nền, hình ảnh nền, và các thuộc tính liên quan khác. Dưới đây là một số ví dụ về cách sử dụng thuộc tính background trong CSS:
- Màu Nền (Background Color): Sử dụng để đặt màu nền cho phần tử.
css
/* Đặt màu nền là màu xanh lam */
background-color: #0066cc;
- Hình Ảnh Nền (Background Image): Sử dụng để đặt hình ảnh làm nền cho phần tử.
css
/* Đặt hình ảnh nền */
background-image: url("background.jpg");
- Lặp Lại Hình Ảnh Nền (Background Repeat): Điều chỉnh cách hình ảnh nền được lặp lại.
css
/* Không lặp lại hình ảnh nền */
background-repeat: no-repeat;
/* Lặp lại hình ảnh nền theo chiều ngang và dọc */
background-repeat: repeat;
- Căn Chỉnh Hình Ảnh Nền (Background Position): Điều chỉnh vị trí bắt đầu của hình ảnh nền.
css
/* Đặt vị trí bắt đầu của hình ảnh nền */
background-position: center top;
- Kích Thước Hình Ảnh Nền (Background Size): Điều chỉnh kích thước của hình ảnh nền.
css
/* Thay đổi kích thước hình ảnh nền để nó đủ lớn để che phủ toàn bộ phần tử */
background-size: cover;
/* Thay đổi kích thước hình ảnh nền để nó đủ lớn để hiển thị hoàn toàn trong phần tử */
background-size: contain;
- Gộp Nền (Background Blend Mode): Điều chỉnh cách nền và nội dung của phần tử gộp lại với nhau.
css
/* Sử dụng chế độ gộp màu */
background-blend-mode: multiply;
Đây chỉ là một số ví dụ cơ bản về cách sử dụng thuộc tính background trong CSS. Có nhiều thuộc tính khác liên quan đến nền mà bạn có thể khám phá để tạo ra các hiệu ứng nền đa dạng và hấp dẫn cho trang web của bạn.