Thuộc tính Background-position trong CSS

Thích 2.69 K Bình luận 0
843 đánh giá
44.4 K

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-position1.04.01.01.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 yposGiá 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.
inheritKế 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 onlinehướng dẫn học CSS

Tác giá: Hoàng Luyến

Trang chủ


Bình luận