Offset hình nền css

vị trí nền cho phép bạn đặt vị trí của hình nền trên phần tử mà nó được áp dụng cho. vị trí nền thường nhận hai giá trị, đặt vị trí ngang và dọc của hình nền bên trong phần tử

bảng tổng quan

Giá trị ban đầu 0% 0%Áp dụng cho Tất cả các phần tửInheritedNoMediavisualComputed giá trị danh sách, mỗi mục bao gồm. hai từ khóa đại diện cho gốc tọa độ và hai khoảng cách từ gốc tọa độ đó, mỗi từ khóa được cung cấp dưới dạng độ dài tuyệt đối (nếu cho trước a), nếu không thì dưới dạng phần trăm. AnimatableYesCSS Object Model PropertybackgroundPositionPercentages Tham khảo kích thước của khu vực định vị nền trừ đi kích thước của hình nền

cú pháp

• background-position: 30% 15%, 40% 80%, 10px 10px
• background-position: length length
• background-position: percentage percentage
• background-position: percentage
• background-position: bottom length right length

• 0

giá trị

chiều dài chiều dàiBất kỳ đơn vị CSS tiêu chuẩn nào cũng được chấp nhận dưới dạng giá trị

1. px, ems, rems, mm, cm, v.v. Lưu ý rằng các giá trị đơn vị chỉ định khoảng cách từ góc trên cùng bên trái của hình nền đến góc trên cùng bên trái của phần tử. Để biết thêm chi tiết về các đơn vị này, hãy đọc Đơn vị độ dài. tỷ lệ phần trăm Tỷ lệ phần trăm được chấp nhận cho các giá trị

1 và chỉ định tỷ lệ phần trăm của chiều rộng và chiều cao tổng thể của phần tử được đề cập. Lưu ý rằng các giá trị phần trăm chỉ định khoảng cách từ góc trên cùng bên trái của hình nền đến góc trên cùng bên trái của phần tử. top bên trái_______0_______1 cũng có thể được diễn đạt dưới dạng từ khóa. trên cùng bên trái, trên cùng, trên cùng bên phải, bên trái, giữa, bên phải, dưới cùng bên trái, dưới cùng, dưới cùng bên phải. Các giá trị này không liên quan cụ thể đến vị trí của góc trên cùng bên trái của hình nền, mà là vị trí tổng thể của hình nền bên trong phần tử. Vì vậy, ví dụ: giá trị của

4 sẽ làm cho trang web hình nền tràn lên trên cùng và bên phải của phần tử mà nó được áp dụng; . phần trămNếu chỉ bao gồm một giá trị duy nhất, giá trị đó được lấy làm giá trị ngang và giá trị dọc được đặt thành

5. 30% 15%, 40% 80%, 10px 10pxNếu bạn đã áp dụng nhiều hình nền cho một phần tử, bạn có thể đặt cho mỗi hình nền một vị trí khác nhau bằng cách chỉ định nhiều giá trị vị trí nền được phân tách bằng dấu phẩy. Các giá trị được cung cấp sẽ xoay vòng để tất cả các hình ảnh được cung cấp một

1, ví dụ: nếu bốn hình nền được chỉ định và chỉ có hai giá trị vị trí, thì vị trí 1 sẽ được áp dụng cho hình ảnh 1 và 3 và vị trí 2 cho hình ảnh 2 và 4. độ dài dưới cùng bên phải độ dàiCSS3 bao gồm cú pháp bốn giá trị mới

1, cho phép bạn chọn các cạnh của phần tử mà bạn đang định vị hình nền so với (giá trị 1 và 3), sau đó là khoảng cách từ các cạnh đó (giá trị 2 và 4 . Vì vậy, ví dụ này nói rằng bạn muốn định vị hình nền 10 pixel từ dưới cùng của phần tử và 15 pixel từ bên phải. Nếu bạn bỏ lỡ một trong các giá trị offset, thì giá trị còn lại được coi là 0

ví dụ

Một bộ năm div đơn giản

________số 8_______

CSS này áp dụng cùng một hình nền và kiểu dáng cơ bản cho mỗi div, nhưng sau đó mỗi div được cung cấp một vị trí nền khác nhau để thay đổi vị trí đặt hình nền

Xem ví dụ trực tiếp

Một div vùng chứa bên ngoài với một số div bên trong

Mỗi div bên trong được cung cấp cùng một kiểu dáng cơ bản và có cùng một hình nền được áp dụng cho nó. Mỗi div riêng lẻ sau đó được cung cấp các giá trị trên cùng và bên trái khác nhau để định vị nó ở một vị trí khác và một giá trị vị trí nền khác nhau để hiển thị một sprite khác. Mỗi sprite có kích thước 128 x 128 px và các div bên trong được đặt thành kích thước 128 x 128 px, vì vậy chỉ một sprite duy nhất sẽ được hiển thị cùng một lúc bởi mỗi sprite. Bạn cần đặt đúng vị trí nền, để toàn bộ nhân vật được hiển thị, không phải là một phần của hai nhân vật

Thuộc tính CSS chấp nhận một số cú pháp. Các giá trị bình thường sẽ là. top|right|bottom|left. Chúng ta cũng có thể chỉ sử dụng center để định tâm trên tất cả các trục

Có thể căn giữa hoặc căn từ trái, nhưng căn từ phải thì không phải lúc nào cũng biết. Hãy nhìn vào việc sắp xếp từ bên phải

background-position: right 25px bottom 25px;

Chúng tôi đã sử dụng hàm calc để tính toán. Chúng ta cũng có thể sử dụng hàm calc với background-position

background-position: calc(100% - 25px) calc(100% - 25px);

Như bạn có thể thấy trong ví dụ này, nó có thể dễ dàng như thế này

Bạn có thể bù vị trí hình ảnh từ bất kỳ hướng nào

Xem ví dụ mã trên Codepen

Chơi xung quanh với phép tính pixel để xem bản trình diễn trực tiếp thay đổi như thế nào

Xem Pen CSS Offset background-position của Chris Bongers (@rebelchris) trên CodePen

Hỗ trợ trình duyệt

Trình duyệt hỗ trợ bù vị trí rất xuất sắc trong các trình duyệt hiện đại. Thật không may, nó không quay trở lại