Thuộc tính Background-image trong css
Background-image là thuộc tính tạo ảnh nền cho phần tử, thường khi lập trình css các nhà thiết kế sẽ kết hợp với thuộc tính Background-color để đáp ứng đầy đủ nhu cầu thực tế khi thiết kế giao diện website.
Ví dụ 1: Background-image với 1 ảnh
body{ background-image: url("logo.png"); background-color: #cccccc;}Ví dụ 2: Background-image với 2 ảnh
body { background-image: url("logo.png"), url("bg.png"); background-color: #cccccc;}Chạy thử với trình
Soạn thảo css online
Định nghĩa và cách sử dụng
Ảnh nền của một phần tử có tổng kích thước của phần tử đó bao gồm cả padding và border (không có margin).
Mẹo: Luôn nên đặt một màu nền được sử dụng nếu các hình ảnh là không có.
| Mặc định: | none |
|---|---|
| Tính kế thừa: | Không |
| Animatable: | Không. Tìm hiểu về Thuộc tính Animatable |
| Phiên bản: | CSS1 |
| Cú pháp JavaScript: | object.style.backgroundImage=”url(logo.png)” |
Trình duyệt hỗ trợ Background-image
Các con số trong bảng dưới đây xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ các thuộc tính.
| Thuộc tính | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Lưu ý: Trình duyệt IE8 trở về trước không hỗ trợ nhiều hình ảnh nền trên một phần tử, các ảnh nền bạn nên sử dụng ảnh jpg hoặc ảnh gif,png có màu nền. Các ảnh không có màu nền sẽ bị lỗi hiển thị.
Cú pháp CSS
background-image: url|none|initial|inherit;
Giá trị thuộc tính Background-image
| Giá trị | Mô tả |
|---|---|
| url(‘URL‘) | Các URL cho hình ảnh. Để chỉ định nhiều hơn một hình ảnh, tách biệt các URL với dấu đóng mở nháy đơn hoặc nháy kép. |
| none | Không có ảnh nền được hiển thị. Đây là mặc định |
| initial | Đặt thuộc tính này là giá trị mặc định. |
| inherit | Kế thừa các thuộc tính này từ phần tử cha của nó |
» Trở về xem bài học CSS online, hướng dẫn học CSS
Tác giá: Hoàng Luyến
