nền-vị trí | CSS-Thủ thuật – vị trí nền trong css

Điều thú vị cần lưu ý là không quan trọng thứ tự bạn sử dụng cho các từ khóa: top center giống với center top . Tuy nhiên, bạn chỉ có thể làm điều này nếu bạn chỉ sử dụng từ khóa. center 10% không giống với center 10% .

Bản trình diễn

Bản trình diễn này hiển thị các ví dụ về background-position được đặt với các đơn vị độ dài, tỷ lệ phần trăm và từ khóa.

Dự phòng nhúng CodePen

Khai báo giá trị

Bạn có thể cung cấp cho background-position tối đa bốn giá trị trong các trình duyệt hiện đại:

• Nếu bạn khai báo một giá trị , giá trị đó là phần bù ngang. Trình duyệt đặt độ lệch dọc thành center .
• Khi bạn khai báo hai giá trị , giá trị đầu tiên là độ lệch ngang và giá trị thứ hai là chiều dọc bù đắp.

Mọi thứ trở nên phức tạp hơn một chút khi bạn bắt đầu sử dụng ba hoặc bốn giá trị, nhưng bạn cũng có nhiều quyền kiểm soát hơn đối với vị trí nền của mình. Cú pháp ba hoặc bốn giá trị xen kẽ giữa từ khóa và đơn vị độ dài hoặc phần trăm. Bạn có thể sử dụng bất kỳ giá trị từ khóa nào ngoại trừ center trong khai báo background-position ba hoặc bốn giá trị.

Khi bạn chỉ định ba giá trị , trình duyệt sẽ xen giá trị thứ tư “bị thiếu” là 0. Dưới đây là ví dụ về background-position có ba giá trị:

  .three-values ​​{
  background-position: bên phải 45px dưới cùng;
}  

Điều này định vị hình nền 45px từ bên phải và 0px từ cuối vùng chứa.

Dưới đây là ví dụ về bốn giá trị background-position :

  .four-values ​​{
  background-position: bên phải 45px đáy 20px;
}  

Điều này đặt hình nền 45px từ bên phải và 20px từ dưới cùng của vùng chứa.

Lưu ý thứ tự của các giá trị trong các ví dụ ở trên: từ khóa theo sau là đơn vị độ dài. background-position ba hoặc bốn giá trị phải tuân theo định dạng đó, với từ khóa đứng trước đơn vị độ dài hoặc phần trăm.

Bản trình diễn

Bản trình diễn này bao gồm các ví dụ về một giá trị, hai giá trị, ba giá trị và bốn giá trị background-position .

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Các giá trị cơ bản được hỗ trợ ở mọi nơi. Cú pháp bốn giá trị có hỗ trợ sau:

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Cạnh

Safari

25

13

9

12

7

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

103

101

4.4

7.0-7.1