Cách gọi ảnh làm background trong css
Trong bài học CSS trước bạn đọc đã cùng Taimienphi.vn tìm hiểu cú pháp và Selector trong CSS, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn thuộc tính background trong CSS nhé.
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 trong CSS1. 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.
https://thuthuat.taimienphi.vn/thuoc-tinh-background-trong-css-48841n.aspx |