Các thuộc tính background trong CSS được sử dụng để xác định các hiệu ứng background cho các phần tử.
Thuộc tính background trong CSS
Các thuộc tính background trong CSS bao gồm:
- Thuộc tính background-color.
- Thuộc tính background-image.
- Thuộc tính background-repeat.
- Thuộc tính background-attachment.
- Thuộc tính background-position.
1. Thuộc tính Background Color trong CSS
Thuộc tính background-color trong CSS được sử dụng để chỉ định màu nền (background) cho một phần tử.
Kết quả đầu ra có dạng như dưới đây:
Trong CSS, màu thường được chỉ định bởi:
- Tên màu hợp lệ, chẳng hạn như "Red".
- Giá trị HEX như "#ff0000".
- Giá trị RGB như "rgb(255,0,0)".
Bạn đọc có thể tham khảo thêm bài viết màu trong CSS trên Taimienphi.vn để tìm hiểu danh sách các giá trị màu hợp lệ.
Ví dụ 2:
Kết quả đầu ra có dạng như dưới đây:
2. Thuộc tính Background Image trong CSS
Thuộc tính background-image trong CSS chỉ định hình ảnh được sử dụng làm nền background của phần tử.
Mặc định hình nền được lặp lại để phủ toàn bộ phần tử.
Ví dụ 1:
Kết quả đầu ra có dạng như dưới đây:
Ví dụ 2:
Ví dụ dưới đây minh họa cách sử dụng kết hợp text và hình nền sai cách:
Kết quả đầu ra có dạng như dưới đây:
Như bạn có thể thấy trong đầu ra ở trên, đoạn text hiển thị trên hình nền rất khó đọc.
Lưu ý: Khi sử dụng hình nền, tốt nhất bạn không nên lựa chọn và sử dụng các hình nền làm rối mắt.
3. Lặp lại hình nền theo chiều ngang hoặc chiều dọc trong CSS
Theo mặc định thuộc tính background-image lặp đi lặp lại hình nền theo chiều ngang hoặc chiều dọc.
Ví dụ 1:
Trong ví dụ dưới đây hình nền được lặp lại theo cả chiều ngang và chiều dọc nên trông khá lạ:
Kết quả đầu ra có dạng như dưới đây:
Ví dụ 2:
Trong ví dụ dưới đây hình nền chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;):
Kết quả đầu ra có dạng như dưới đây:
Lưu ý: Để lặp lại hình nền theo chiều dọc, chúng ta thiết lập: background-repeat: repeat-y;
4. Thiết lập vị trí hình nền trong CSS
Thuộc tính background-repeat chỉ hiển thị hình nền 1 lần, không lặp lại.
Ví dụ 1:
Kết quả đầu ra có dạng như dưới đây:
Trong ví dụ trên, hình nền được hiển thị cùng một vị trí với text nên trông khá rối mắt. Tuy nhiên chúng ta có thể thay đổi vị trí hình nền để không ảnh hưởng đến phần text.
Để chỉ định vị trí hình nền, chúng ta sử dụng thuộc tính background-position.
Ví dụ 2:
Kết quả đầu ra có dạng như dưới đây:
5. Thiết lập vị trí hình nền cố định
Để thiết lập vị trí hình nền cố định, không scroll được, chúng ta sử dụng thuộc tính background-attachment.
Ví dụ:
Kết quả đầu ra có dạng như dưới đây:
6. Rút gọn thuộc tính Background
Để rút gọn mã, chúng ta có thể chỉ định tất cả các thuộc tính background trong một thuộc tính duy nhất. Phương pháp này còn được gọi là rút gọn thuộc tính (shorthand property).
Rút gọn thuộc tính của background là background.
Ví dụ:
Kết quả đầu ra có dạng như dưới đây:
Khi sử dụng rút gọn thuộc tính, thứ tự các giá trị thuộc tính sẽ là:
background-color
background-image
background-repeat
background-attachment
background-position
7. Các thuộc tính Background trong CSS
Trong bảng dưới đây, Taimienphi.vn liệt kê danh sách tất cả các thuộc tính Background trong CSS:
Thuộc tính Mô tả
background Thiết lập tất cả các thuộc tính background trong một khai báo.
background-attachment Thiết lập hình nền là cố định hay có thể scroll.
background-clip Chỉ định vị trí cho hình nền.
background-color Thiết lập màu nền cho các phần tử.
background-image Thiết lập hình nền cho các phần tử.
background-origin Chỉ định các vị trí hình nền là cố định.
background-position Thiết lập vị trí bắt đầu của hình nền.
background-repeat Thiết lập cách lặp lại hình nền.
background-size Chỉ định kích thước hình nền.
Như vậy bài học CSS trên đây Taimienphi.vn vừa giới thiệu cho bạn các thuộc tính background trong CSS. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn các thuộc tính font trong CSS nhé.