Thuộc tính background-position trong CSS cho phép bạn di chuyển hình nền (hoặc gradient) xung quanh trong vùng chứa của nó.

Bạn đang xem : đẩy hình nền xuống css

Thuộc tính background-position trong CSS cho phép bạn di chuyển hình nền (hoặc gradient) xung quanh trong vù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ụ: trên cùng bên phải )

Các giá trị mặc định là 0 0 . Thao tác này sẽ đặ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 5px sẽ di chuyển hình ảnh 100px sang phải và 5 pixel xuống dưới. Bạn có thể đặt giá trị độ dài bằng px , em hoặc bất kỳ giá trị độ dài CSS nào khác của .

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. trên cùng bên phải dễ nhớ và dễ viết hơn 0 100% 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
  • trái : 0% theo chiều ngang
  • center : 50% theo chiều ngang nếu chưa có chiều ngang được xác định. Nếu đúng thì điều này sẽ được áp dụng theo chiều dọc.

Đ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 các từ khóa và các đơ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” thành 0. Đâ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ừ dưới cùng của 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 con 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

Edge

Safari

25

13

9

12

7

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

Android Chrome

Android Firefox

Android

iOS Safari

102

101

4.4

7.0-7.1

Đó là mức hỗ trợ giống như background-position-x và < thuộc tính code> background-position-y .

Thông tin thêm


Xem thêm những thông tin liên quan đến chủ đề đẩy ảnh nền xuống css

CSS Fullscreen Background Image: (1/2)

  • Tác giả: Codecourse
  • Ngày đăng: 2014-09-22
  • Đánh giá: 4 ⭐ ( 9391 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Want more? Explore the library at https://www.codecourse.com/lessons

    Official site
    https://www.codecourse.com

    Twitter
    https://twitter.com/teamcodecourse

Thiết lập hình nền trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 5245 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền …

Làm thế nào để lật hình nền bằng CSS?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2931 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể lật nó theo chiều ngang với CSS … a:visited { -moz-transform: scaleX(-1); -o-transform:…

Hướng dẫn cách thiết lập thuộc tính Background Image CSS

  • Tác giả: kmedia.com.vn
  • Đánh giá: 5 ⭐ ( 2105 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, tôi sẽ hướng dẫn các bạn cách thiết lập thuộc tính background image css để định dạng nền cho phần tử HTML.

Ảnh Nền trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 4321 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách thiết lập ảnh nền cho phần tử HTML trong CSS thông qua sử dụng thuộc tính background-image kèm theo ví dụ và source code mẫu minh hoạ.

Nền với CSS

  • Tác giả: www.codelean.vn
  • Đánh giá: 3 ⭐ ( 7812 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CodeLean.vn là nơi chia sẻ kiến thức của những người học, làm và dạy trong lĩnh vực công nghệ thông tin.

Những thuộc tính css của images mà bạn cần biết

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 1098 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Làm sắc nét hình ảnh với *image-rendering* Khi một hình ảnh được phóng to, trình duyệt làm mịn hình ảnh, do đó, nó không nhìn pixelated. Tuy nhiên, tùy thuộc vào độ phân giải của hình ảnh và màn…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Giá trị, Kích thước, Chiều rộng, Đa đường - EyeHunts - độ dài văn bản đầu vào html

By ads_php