Buzz
Các thuộc tính background trong CSS không chỉ đơn thuần là màu sắc, chúng còn tạo ra những hiệu ứng độc đáo cho các phần tử trên trang web của bạn.
Khám Phá Đầy Đủ Thuộc Tính Background trong CSS
Bí Quyết: Đồng Hồ Thuộc Tính Background Trong CSS
- 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.
Học Hiểu Rõ Về Thuộc Tính Background Trong CSS
1. Tạo Màu Nền Cho Phần CSS
Thuộc tính background-color trong CSS giúp bạn tạo màu nền phong cách cho phần tử.
Dưới đây là kết quả bạn sẽ nhận được:
Trong CSS, bạn có thể sử dụng màu bằng cách:
- Chọn một tên màu hợp lệ, như 'Đỏ'.
- Sử dụng mã HEX như '#ff0000' để đặt màu cụ thể.
- Lựa chọn giá trị RGB như 'rgb(255,0,0)' để định rõ màu sắc.
Nếu quan tâm, bạn có thể tham khảo bài viết về màu sắc trong CSS trên Mytour để biết thêm về danh sách các giá trị màu hợp lệ.
Ví dụ 2:
Dưới đây là kết quả hiển thị bạn mong muốn:
2. Thuộc tính Hình Ảnh Nền trong CSS
Thuộc tính background-image trong CSS xác định hình ảnh dùng làm nền cho phần tử.
Hình nền thường được lặp lại để đầy đủ bề mặt của phần tử.
Ví dụ 1:
Dưới đây là kết quả bạn dự kiến:
Ví dụ 2:
Ví dụ sau đây minh họa cách sử dụng văn bản kết hợp với hình nền một cách không đúng:
Dưới đây là kết quả bạn mong đợi:
Như bạn có thể thấy, trong kết quả trên, đoạn văn bản 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 là bạn không nên 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
Mặc định, thuộc tính background-image sẽ lặp lại hình nền theo cả chiều ngang và chiều dọc.
Ví dụ 1:
Trong ví dụ dưới đây, hình nền được lặp lại cả chiều ngang và chiều dọc, tạo nên một diện mạo độc đáo:
Dưới đây là kết quả bạn mong đợi:
Ví dụ 2:
Trong ví dụ này, hình nền chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;):
Dưới đây là kết quả bạn sẽ thu được:
Lưu ý: Để lặp lại hình nền theo chiều dọc, chúng ta chỉ cần thiết lập: background-repeat: repeat-y;
4. Đặt vị trí cho hình nền trong CSS
Thuộc tính background-repeat hiển thị hình nền một lần, không lặp lại.
Ví dụ 1:
Dưới đây là kết quả bạn sẽ nhận được:
Trong ví dụ trước đó, hình nền được hiển thị ở cùng một vị trí với văn bản, tạo cảm giác hỗn loạn. Để giải quyết điều này, chúng ta có thể điều chỉnh vị trí của hình nền mà không ảnh hưởng đến văn bản.
Để xác đị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ả sẽ có dạng như sau:
5. Đặt vị trí cố định cho hình nền trong CSS
Để làm cho hình nền giữ vững ở một vị trí cố định và không di chuyển khi cuộn trang, chúng ta sử dụng thuộc tính background-attachment.
Ví dụ:
Kết quả sẽ có dạng như sau:
6. Rút gọn thuộc tính Background trong CSS
Để viết gọn mã, chúng ta có thể tổng hợp tất cả các thuộc tính background vào một chỉ một thuộc tính duy nhất. Phương pháp này thường đượ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ả xuất hiện như sau:
Khi sử dụng rút gọn thuộc tính, thứ tự các giá trị sẽ là:
màu nền (background-color)
hình nền (background-image)
Thuộc tính lặp lại hình nền (background-repeat)
Thuộc tính đính kèm hình nền (background-attachment)
Thuộc tính vị trí hình nền (background-position)
7. Các Thuộc Tính Background trong CSS
Dưới đây là bảng liệt kê các thuộc tính Background trong CSS của Mytour:
Mô tả
background - Thiết lập tất cả thuộc tính background trong một lệnh.
background-attachment - Đặt hình nền là cố định hoặc có thể cuộn.
background-clip - Xác định vị trí của hình nền.
background-color - Thiết lập màu nền cho phần tử.
background-image - Thiết lập hình nền cho phần tử.
background-origin - Chỉ định vị trí cố định của hình nền.
background-position - Thiết lập vị trí bắt đầu của hình nền.
background-repeat - Đặt cách lặp lại hình nền.
background-size - Xác định kích thước của hình nền.
Đây là những kiến thức cơ bản về CSS mà Mytour đã chia sẻ. Chờ đón bài học tiếp theo với các thuộc tính font trong CSS nhé!
