background-position-x
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
* Some parts of this feature may have varying levels of support.
Thuộc tính CSS background-position-x đặt vị trí ngang ban đầu cho mỗi ảnh nền. Vị trí tương đối so với lớp vị trí được đặt bởi background-origin.
Giá trị của thuộc tính này bị ghi đè bởi bất kỳ khai báo nào của thuộc tính viết tắt background hoặc background-position được áp dụng cho phần tử sau đó.
Try it
background-position-x: left;
background-position-x: center;
background-position-x: 25%;
background-position-x: 2rem;
background-position-x: right 32px;
<section class="display-block" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
background-color: navajowhite;
background-image: url("/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
height: 100%;
}
Cú pháp
/* Giá trị từ khóa */
background-position-x: left;
background-position-x: center;
background-position-x: right;
/* Giá trị <percentage> */
background-position-x: 25%;
/* Giá trị <length> */
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;
/* Giá trị tương đối theo cạnh */
background-position-x: right 3px;
background-position-x: left 25%;
/* Nhiều giá trị */
background-position-x: 0px, center;
/* Giá trị toàn cục */
background-position-x: inherit;
background-position-x: initial;
background-position-x: revert;
background-position-x: revert-layer;
background-position-x: unset;
Thuộc tính background-position-x được chỉ định bằng một hoặc nhiều giá trị, phân cách bằng dấu phẩy.
Giá trị
left-
Căn cạnh trái của ảnh nền với cạnh trái của lớp vị trí nền.
center-
Căn giữa ảnh nền với giữa lớp vị trí nền.
right-
Căn cạnh phải của ảnh nền với cạnh phải của lớp vị trí nền.
<length>-
Offset của cạnh dọc trái của ảnh nền được cho từ cạnh dọc trái của lớp vị trí nền. (Một số trình duyệt cho phép gán cạnh phải để offset).
<percentage>-
Offset của vị trí ngang của ảnh nền được cho tương đối so với container. Giá trị 0% có nghĩa là cạnh trái của ảnh nền được căn với cạnh trái của container, và giá trị 100% có nghĩa là cạnh phải của ảnh nền được căn với cạnh phải của container, vì vậy giá trị 50% căn giữa theo chiều ngang ảnh nền.
Định nghĩa hình thức
| Initial value | 0% |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Percentages | refer to width of background positioning area minus width of background image |
| Computed value | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | a repeatable list |
Cú pháp hình thức
background-position-x =
[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#
<length-percentage> =
<length> |
<percentage>
Ví dụ
Ví dụ cơ bản
Ví dụ sau đây minh họa triển khai ảnh nền, với background-position-x và background-position-y được dùng để định nghĩa vị trí ngang và dọc của ảnh riêng biệt.
HTML
<div></div>
CSS
div {
width: 300px;
height: 300px;
background-color: skyblue;
background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: bottom;
}
Kết quả
Giá trị tương đối theo cạnh
Ví dụ sau đây minh họa hỗ trợ cú pháp offset tương đối theo cạnh, cho phép nhà phát triển offset nền từ bất kỳ cạnh nào.
HTML
<div></div>
CSS
div {
width: 300px;
height: 300px;
background-color: seagreen;
background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");
background-repeat: no-repeat;
background-position-x: right 20px;
background-position-y: bottom 10px;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Backgrounds Module Level 4 # background-position-longhands |