nền-vị trí | CSS-Thủ thuật – vị trí nền trong 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ó.

Bạn đang xem : vị trí nền trong 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 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ụ: 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 đượ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 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

Đó 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ủ đề vị trí nền trong css

Đơn vị trong CSS

  • Tác giả: F8 Official
  • Ngày đăng: 2020-01-30
  • Đánh giá: 4 ⭐ ( 1606 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy học tại http://fullstack.edu.vn để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.

    hoclaptrinh mienphi frontend backend devops
    ———————————————————–
    SƠN ĐẶNG
    ► Facebook: https://fb.com/sondnmc
    ► Email: sondnf8@gmail.com
    —————————————
    ► Học lập trình: http://fullstack.edu.vn
    ► Viết CV xin việc: http://mycv.vn
    —————————————
    HỌC LẬP TRÌNH MIỄN PHÍ
    ► Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    ► Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css

Sử dụng background trong CSS

  • Tác giả: levunguyen.com
  • Đánh giá: 4 ⭐ ( 5959 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng background trong trong dự án làm web. Hướng dẫn Sử dụng background trong CSS vào dự án web.

Nền trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 4520 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đặc tính nền trong CSS được dùng để định nghĩa hiệu ứng nền cho các phần tử.

9 cách sử dụng background (nền) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 3 ⭐ ( 3867 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

thuộc tính background trong CSS

  • Tác giả: viettuts.vn
  • Đánh giá: 5 ⭐ ( 8448 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chương này hướng dẫn bạn làm thế nào để thiết lập nền của các phần tử HTML khác nhau. Bạn có thể thiết lập các thuộc tính nền sau của một phần tử:

Background trong CSS, Thuộc tính Background-image, size trong CSS

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 3 ⭐ ( 8122 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Background trong CSS, Thuộc tính Background-image trong CSS. Để xác định background các phần tử trong HTML, bạn có thể sử dụng các thuộc tính background trong CSS.

Background trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 4 ⭐ ( 4143 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo background cho một phần tử bằng cách sử dụng CSS.

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  Hướng dẫn Bootstrap - cách làm việc với bootstrap