Vị trí nền CSS:Nó là gì và nó hoạt động như thế nào?

Các nhà phát triển web sử dụng thuộc tính vị trí nền CSS khi họ cần điều chỉnh vị trí bắt đầu cho hình nền mà họ đang làm việc. Trong bài viết này, chúng ta sẽ xem xét thuộc tính background-position và cách điều chỉnh nó để thay đổi vị trí hình ảnh của bạn.

Cú pháp

Cú pháp cho thuộc tính background-position bên trong bộ chọn CSS như sau:

background-position: value

Có một số cách khác nhau để khai báo giá trị trên background-position:

Có một số giá trị cặp từ khoá có thể được sử dụng:
- trên cùng bên trái
- trái giữa
- dưới cùng bên trái
- trên cùng bên phải
- chính giữa
- dưới cùng bên phải
- đầu trung tâm
- trung tâm trung tâm
- dưới cùng giữa

Từ đầu tiên đại diện cho trục hoành hoặc x. Từ thứ hai đại diện cho trục dọc, hoặc y. Nếu chỉ một giá trị được khai báo, giá trị y sẽ tự động được đặt thành "center".

x%, y%:

Tương tự như tùy chọn đầu tiên, bạn có thể chỉ định tối đa hai giá trị:một cho vị trí ngang trên trục x, một cho vị trí dọc trên trục y. Nếu chỉ có một giá trị được cho, giá trị y% được đặt thành 50% để căn giữa hình ảnh trên trục y. Trên cùng bên trái là 0% 0%, trên cùng bên phải là 100% 0%, dưới cùng bên trái là 100% 0% và dưới cùng bên phải là 100% 100%.

xpos, ypos (bằng px / rem / em / pt):

Cũng tương tự như hai tùy chọn trước đó, nhưng các con số được đưa ra bằng đơn vị CSS thay vì phần trăm (mặc dù bạn có thể trộn phần trăm và rem / em / px / pt nếu muốn). Nếu không có giá trị thứ hai được đưa ra, ypos được đặt thành 50%;

Dưới đây là một số ví dụ cho thấy các giá trị khác nhau bằng cách sử dụng tùy chọn đầu tiên:

Trên cùng bên trái:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Top Left</title>
  <style>
    body {
      background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: top left;
      display: flex;
      flex-flow: row wrap;
    }
 
    div {
      height: 200px;
      width: 25%;
      background: transparent;
      border: 5px double ivory;
      margin: 20px;
    }
 
    #text-block {
      background: ivory;
      border: 5px double black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
 
    }
  </style>
</head>
 
<body>
  <div>
 
  </div>
  <div>
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div id="text-block">
    top left
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <script src="script.js">
 
  </script>
</body>
 
</html>

Chính giữa:

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Center Right</title>
  <style>
    body {
      background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: center right;
      display: flex;
      flex-flow: row wrap;
    }
 
    div {
      height: 200px;
      width: 25%;
      background: transparent;
      border: 5px double ivory;
      margin: 20px;
    }
 
    #text-block {
      background: ivory;
      border: 5px double black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
 
    }
  </style>
</head>
 
<body>
  <div>
 
  </div>
  <div>
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div id="text-block">
    center right
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <script src="script.js">
 
  </script>
</body>
 
</html>

Dưới cùng bên trái:

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bottom Left</title>
  <style>
    body {
      background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: bottom left;
      display: flex;
      flex-flow: row wrap;
    }
 
    div {
      height: 200px;
      width: 25%;
      background: transparent;
      border: 5px double ivory;
      margin: 20px;
    }
 
    #text-block {
      background: ivory;
      border: 5px double black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
 
    }
  </style>
</head>
 
<body>
  <div>
 
  </div>
  <div>
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div id="text-block">
    bottom left
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <div>
 
  </div>
  <script src="script.js">
 
  </script>
</body>
 
</html>

Kết luận

Hy vọng rằng các trình chỉnh sửa mã ở trên cung cấp cho bạn cách bạn có thể sử dụng thuộc tính background-position trong CSS của mình. Chơi với nó - thay đổi hình nền được sử dụng ở đây, thay đổi vị trí - chỉ để xem những gì có thể được thực hiện!