Bài 1 – Thuộc tính CSS Background
CSS Background là thuộc tính để định dạng màu nền và hình nền cho một đối tượng, các thuộc tính bao gồm: Background-color Background-image Background-repeat Background-attachment Background-position Ví dụ minh họa với từng thuộc tính: 1.1. Background-color Màu ...
CSS Background là thuộc tính để định dạng màu nền và hình nền cho một đối tượng, các thuộc tính bao gồm:
- Background-color
- Background-image
- Background-repeat
- Background-attachment
- Background-position
Ví dụ minh họa với từng thuộc tính:
1.1. Background-color
Màu nền cho phần tử toàn trang là thẻ, hãy xem ví dụ 4 trường hợp giá trị thuộc tính khác nhau nhưng cùng 1 kết quả:
|
1 2 3 4 |
body{background-color: #000000;} /* Có giá trị là Hex có 6 số */ body{background-color: #000;} /* Tối ưu CSS màu nền còn 3 số, trường hợp này chỉ áp dụng với 6 số giống nhau ví dụ 111,222,333,... */ body{background-color: black;} /*Có giá trị là tên màu black */ body{background-color: rgb(0,0,0);} /*Có giá trị RGB */ |
(Bạn nên chạy thử trên website soạn thảo css online để hiểu rõ ý nghĩa của câu lệnh)
1.2. Background-image
Màu nền cho menu là 1 ảnh, xem ví dụ minh họa:
|
1 2 3 4 5 6 7 8 |
/* 1. Hình nền là 1 file Logo được lặp cả chiều ngang và dọc*/ /* & file ảnh cùng thư mục với file tài liệu */ body {background-image: url("logo1.png");} /* 2. Tệp logo có đường dẫn tuyệt đối */ body {background-image: url("https://hoangluyen.com/wp-content/uploads/2015/01/logo1.png");} /* Copy 1 trong 2 đọa mã trên để test thử */ |
1.3. Background-repeat
Màu nền được lặp ngang dọc theo ý muốn, các giá trị như sau:
repeat-x: Lặp ngang
repeat-y: Lặp dọc
repeat: Lặp cả ngang cả dọc
no-repeat: Không lặp chỉ hiện thị 1 ảnh
|
1 2 3 4 |
body { background-image: url("https://hoangluyen.com/wp-content/uploads/2015/01/logo1.png"); background-repeat: repeat-x; } |
1.4. Background-attachment
Đây là thuộc tính nâng cao của Background CSS, có cú pháp như sau
|
1 |
background-attachment: scroll|fixed|local|initial|inherit; |
(Bạn nên chạy thử trên website soạn thảo css online để hiểu rõ ý nghĩa của câu lệnh)
| « Hướng dẫn học css | Bài 2: CSS Text » |
———————————————————————————————————–
Tác giả: Hoàng Luyến
https://hoangluyen.com/
