Rate this post

background-position trong CSS là thuộc tính dùng để xác định vị trí của hình nền trong một thành phần HTML. Nó có thể được xác định theo pixel hoặc theo tỷ lệ phần trăm. Ví dụ, background-position: top left sẽ đặt hình nền ở góc trên bên trái của thành phần, trong khi background-position: 50% 50% sẽ đặt hình nền ở giữa thành phần.

Các bài viết liên quan:

Các giá trị của background-position trong css

background-position trong CSS có thể có nhiều giá trị khác nhau, bao gồm:

  • Từ khóa: top, center, bottom, left, right
  • Giá trị pixel: Ví dụ: background-position: 10px 20px
  • Giá trị tỷ lệ phần trăm: Ví dụ: background-position: 50% 25%
  • Giá trị từ khóa và tỷ lệ phần trăm hoặc pixel: Ví dụ: background-position: left 50%

Chú ý: Nếu chỉ cung cấp một giá trị, nó sẽ được coi là giá trị cho trục x (hoặc trục ngang), và giá trị mặc định cho trục y (hoặc trục đứng) là center.

Một số ví dụ về background-position trong css

Dưới đây là một số ví dụ về cách sử dụng thuộc tính background-position trong CSS:

  1. Đặt hình nền ở góc trên bên trái của thành phần:
background-position: top left;
  1. Đặt hình nền giữa thành phần:
background-position: center center;
  1. Đặt hình nền 10 pixel từ trái và 20 pixel từ trên:
background-position: 10px 20px;
  1. Đặt hình nền tại vị trí 50% từ trục x và 25% từ trục y:
background-position: 50% 25%;
  1. Đặt hình nền tại vị trí bên trái và 50% từ trục y:
background-position: left 50%;
  1. Đặt hình nền tại vị trí 20% từ trục x và bên dưới:
background-position: 20% bottom;
  1. Đặt hình nền tại vị trí bên trái và giữa của thành phần:
background-position: left center;

Lưu ý: Các ví dụ trên chỉ là một số ví dụ cơ bản về việc sử dụng thuộc tính background-position trong CSS, bạn có thể sử dụng nó theo cách khác nhau để đạt được hiệu quả thiết kế mong muốn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now