Bảng lịch học

Hướng dẫn tham khảo CSS

Thuộc tính CSS

Khóa học tự chọn

Khuyến nghị khóa học:

Bảo tàng Bảo bối CodeW3C.com

Thuộc tính background-position-x CSS

trang trước background-position
Trang tiếp theo background-position-y

Định nghĩa và cách sử dụng

background-position-x Thiết lập vị trí hình ảnh nền trên trục x.

Lưu ý:Mặc định, hình ảnh nền được đặt ở góc trên cùng bên trái của phần tử và được lặp lại theo hướng dọc và ngang.

Mô hình

ví dụ 1

Cách định vị hình ảnh nền trên trục x:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

Thử ngay

ví dụ 2

Cách định vị hình ảnh nền ở bên phải:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

Thử ngay

ví dụ 3

Cách sử dụng định vị điểm ảnh phần trăm cho hình ảnh nền:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

Thử ngay

ví dụ 4

Cách sử dụng định vị điểm ảnh pixel cho hình ảnh nền:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

Thử ngay

ví dụ 5

Tạo một hình ảnh nền盖 qua khung chứa bằng các thuộc tính nền khác nhau:

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的图像 */
  background-color: #cccccc; /* Nếu hình ảnh không có sẵn, sử dụng màu này */
  height: 300px; /* Phải đặt chiều cao */
  background-position-x: center; /* Đặt hình ảnh ở giữa */
  background-repeat: no-repeat; /* Không lặp lại hình ảnh */
  background-size: cover; /* Điều chỉnh kích thước hình ảnh nền để bao phủ toàn bộ容器 */
}

Thử ngay

Ngôn ngữ CSS

background-position-x: value;

Giá trị thuộc tính

Giá trị	Mô tả
left	Đặt vị trí nền ở bên trái trục x.
right	Đặt vị trí nền ở bên phải trục x.
center	Đặt vị trí nền ở giữa trục x.
x%	Bên trái của trục x là 0%, bên phải là 100%. Giá trị phần trăm là chiều rộng của khu vực định vị nền trừ đi chiều rộng của hình ảnh nền.
xpos	Khoảng cách từ bên trái theo chiều ngang. Đơn vị có thể là pixel (ví dụ: 0px) hoặc khác Đơn vị CSS.
xpos offset	Giá trị kép, chỉ hỗ trợ trong Firefox và Safari. xpos Đặt thành left hoặc right offset Là khoảng cách ngang từ bên trái hoặc phải của hình ảnh nền so với vị trí đặt nền Đơn vị có thể là pixel hoặc khác Đơn vị CSS.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	0%
Kế thừa:	Không
Tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Ngôn ngữ JavaScript:	object.style.backgroundPositionX="center"