Định vị nền

2.1 Thuộc tính background-position

Thuộc tính background-position trong CSS được sử dụng để đặt vị trí ban đầu của hình nền trong phần tử. Thuộc tính này cho phép bạn xác định chính xác vị trí hình nền sẽ được đặt bên trong phần tử. background-position có thể được sử dụng để điều chỉnh chính xác hiển thị của hình nền và tạo ra các thiết kế phức tạp hơn.

Cú pháp background-position

Thuộc tính background-position chấp nhận hai giá trị, chỉ vào vị trí ngang và dọc của hình nền:

    
      background-position: vị-trí-ngang vị-trí-dọc;
    
  

Nếu chỉ một giá trị được chỉ định, giá trị thứ hai mặc định là center.

Các giá trị vị trí ngang và dọc có thể là:

• Từ khóa:
  • left: căn trái
  • center: căn giữa
  • right: căn phải
  • top: căn trên
  • bottom: căn dưới
• Giá trị phần trăm:
  • Ví dụ, 50% 50% định vị hình ảnh ở giữa
  • Giá trị phần trăm liên quan đến kích thước của phần tử, không phải ảnh
• Giá trị pixel:
  • Ví dụ, 10px 20px định vị hình ảnh 10 pixel từ cạnh trái và 20 pixel từ cạnh trên
• Kết hợp giá trị:
  • Có thể kết hợp từ khóa và giá trị phần trăm, ví dụ, left 50%

2.2 Từ khóa

Từ khóa:

• left, center, right: căn ngang
• top, center, bottom: căn dọc

Ví dụ sử dụng từ khóa

Hình ảnh được định vị ở góc trên bên trái:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* Hình ảnh được định vị ở góc trên bên trái */
      }
    
  

Hình ảnh được định vị ở giữa:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* Hình ảnh được định vị ở giữa */
      }
    
  

Hình ảnh được định vị ở góc dưới bên phải:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* Hình ảnh được định vị ở góc dưới bên phải */
      }
    
  

2.3 Phần trăm

Giá trị phần trăm chỉ ra vị trí hình ảnh liên quan đến kích thước của phần tử.

Ví dụ sử dụng phần trăm

Hình ảnh được định vị ở giữa:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* Hình ảnh được định vị ở giữa */
      }
    
  

Hình ảnh được định vị ở góc trên bên trái:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* Hình ảnh được định vị ở góc trên bên trái */
      }
    
  

Hình ảnh được định vị ở góc dưới bên phải:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* Hình ảnh được định vị ở góc dưới bên phải */
      }
    
  

2.4 Đơn vị tuyệt đối (px, em, rem)

Giá trị bằng pixel hoặc các đơn vị tuyệt đối khác cho phép định vị hình ảnh chính xác.

Hình ảnh được định vị ở giữa:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* Hình ảnh được định vị 10 pixel sang phải và 20 pixel xuống dưới từ góc trên bên trái */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* Hình ảnh được định vị 2em sang phải và 3em xuống dưới */
      }
    
  

2.5 Kết hợp giá trị

Bạn có thể kết hợp từ khóa và đơn vị tuyệt đối để tạo ra sự định vị chính xác hơn.

Kết hợp giá trị:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* Hình ảnh được định vị 20 pixel sang phải và 10 pixel xuống dưới từ góc trên bên trái */
      }