Vị trí nền - Thủ thuật CSS

Anonim

Các background-positionbất động sản trong CSS cho phép bạn di chuyển một hình nền (hoặc gradient) xung quanh trong phạm vi thùng chứa của nó.

html ( background-position: 100px 5px; )

Nó có ba loại giá trị khác nhau:

  • Giá trị độ dài (ví dụ 100px 5px)
  • Phần trăm (ví dụ 100% 5%)
  • Từ khóa (ví dụ top right)

Các giá trị mặc định là 0 0. Điều này đặt hình nền của bạn ở trên cùng bên trái của vùng chứa.

Giá trị độ dài khá đơn giản: giá trị đầu tiên là vị trí ngang, giá trị thứ hai là vị trí dọc. Vì vậy, 100px 5pxsẽ di chuyển hình ảnh 100px sang phải và năm pixel xuống. Bạn có thể đặt giá trị thời gian trong px, emhoặc bất kỳ giá trị chiều dài CSS khác.

Tỷ lệ phần trăm hoạt động hơi khác một chút. Nâng cao năng lực toán học của bạn: di chuyển hình nền theo X% có nghĩa là nó sẽ căn chỉnh điểm X% trong hình ảnh với điểm X% trong vùng chứa. Ví dụ: 50%có nghĩa là nó sẽ căn chỉnh giữa hình ảnh với giữa vùng chứa. 100%có nghĩa là nó sẽ căn chỉnh pixel cuối cùng của hình ảnh với pixel cuối cùng của vùng chứa, v.v.

Từ khóa chỉ là lối tắt cho tỷ lệ phần trăm. Nó dễ nhớ và dễ viết top righthơn 100% 0, và đó là lý do tại sao từ khóa là một thứ. Dưới đây là danh sách của tất cả năm từ khóa và các giá trị tương đương của chúng:

  • top: 0% theo chiều dọc
  • right: 100% theo chiều ngang
  • bottom: 100% theo chiều dọc
  • left: 0% theo chiều ngang
  • center: 50% theo chiều ngang nếu chiều ngang chưa được xác định. Nếu đúng thì điều này được áp dụng theo chiều dọc.

Thật thú vị khi lưu ý rằng thứ tự bạn sử dụng cho các từ khóa không quan trọng: top centergiống như 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 như 10% center.

Bản giới thiệu

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

Xem các giá trị vị trí nền của Bút bằng CSS-Tricks (@ css-trick) trên CodePen.

Khai báo giá trị

Bạn có thể cho background-positiontối đa bốn giá trị trong các trình duyệt hiện đại (xem bảng Hỗ trợ trình duyệt để biết thêm chi tiết).

Nếu bạn khai báo một giá trị , giá trị đó là giá trị 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à độ lệch dọc.

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ừ centertrong background-positionkhai báo 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ề giá trị ba giá trị background-position:

#threevalues ( background-position: right 45px bottom; )

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

Đây là một ví dụ về giá trị bốn background-position :

#fourvalues ( background-position: right 45px bottom 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. Giá trị ba hoặc bốn background-positionphả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 giới thiệu

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.

Xem cú pháp giá trị background-position 1, 2, 3 và 4 của Pen bằng CSS-Tricks (@ css-trick) trên CodePen.

Có liên quan

  • nền-tệp đính kèm
  • nền-clip
  • màu nền
  • hình nền
  • nền-nguồn gốc
  • Bối cảnh Lặp lại
  • kích thước nền

Nhiêu tai nguyên hơn

  • background-position trong thông số CSS3
  • background-position tại MDN
  • Hình nền bù đắp

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, có nhiều chi tiết hơn. Một con số cho biết 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

Trình duyệt Chrome Firefox I E Cạnh Safari
25 13 9 12 7

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

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 4.4 7,0-7,1

Đó là mức hỗ trợ giống như các thuộc tính background-position-xvà background-position-y.