Thuộc tính Background-position trong CSS
Background-position là thuộc tính xác định vị trí của ảnh nền trên phần tử, giá trị mặc định của nó ở góc trên và từ mép trái của phần tử. Nói một cách khác nó hỗ trợ thuộc tính background-image xác định vị trí ảnh nền.
Ví dụ: logo.png được đặt ở giữa màn hình không lặp, nằm cố định ở giữa trang.
body { background-image: url('logo.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;}Chạy thử với trình
Soạn thảo css online
Định nghĩa và cách sử dụng
Thuộc tính background-position đặt vị trí bắt đầu của một hình ảnh nền.
Mẹo: Theo mặc định, một background-image được đặt ở góc trên bên trái của một phần tử, và lặp đi lặp lại cả theo chiều dọc và chiều ngang.
| Giá trị mặc định: | 0% 0% |
|---|---|
| Tính kế thừa: | Không |
| Animatable: | Có. Tìm hiểu về Thuộc tính Animatable |
| Version: | CSS1 |
| Cú pháp JavaScript: | object.style.backgroundPosition=”center” |
Trình duyệt hỗ trợ Background-position
| Thuộc tính | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Lưu ý: IE8 và cũ hơn không hỗ trợ nhiều hình ảnh nền trên một phần tử.
Cú pháp CSS Background-position
background-position: value;
Các giá trị thuộc tính
| Các giá trị | Mô tả |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Nếu bạn chỉ định một từ khóa, các giá trị khác sẽ là trung tâp có giá trị “center” |
| x% y% | Giá trị đầu tiên là vị trí nằm ngang và giá trị thứ hai là thẳng đứng. Góc trên bên trái là 0% 0%. Góc dưới bên phải là 100% 100%. Nếu bạn chỉ định một giá trị, các giá trị khác sẽ là 50%. Giá trị mặc định là: 0% 0% |
| xpos ypos | Giá trị đầu tiên là vị trí nằm ngang và giá trị thứ hai là thẳng đứng. Góc trên bên trái là 0 0. Các đơn vị có thể được pixels (0px 0px) hoặc bất kỳ đơn vị CSS khác. Nếu bạn chỉ định một giá trị, các giá trị khác sẽ là 50%. Bạn có thể kết hợp% và vị trí |
| 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
