Thuộc tính background-origin

Thuộc tính background-origin xác định cách hình nền (chính là hình ảnh, không phải màu nền) sẽ được đặt tương đối với phần tử: một phần hình nền sẽ tràn xuống dưới đường viền, hình nền sẽ không tràn xuống dưới đường viền hoặc hình nền sẽ chỉ được đặt trên phần nội dung của phần tử (tức là padding sẽ đẩy lùi hình nền).

Cú pháp

cssbộ chọn {
  background-origin: padding-box | border-box | content-box;
}

Giá trị

Giá trị mặc định: padding-box.

Lưu ý

Thuộc tính background-origin không hoạt động, khi background-attachment có giá trị fixed. Đồng thời, khi background-repeat có giá trị repeat, thuộc tính background-origin luôn hoạt động như với giá trị border-box.

Ví dụ . Mặc định

Mặc định, hình nền sẽ không tràn xuống dưới đường viền:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Ví dụ . Giá trị border-box

Bây giờ hình nền sẽ tràn xuống dưới đường viền:

html<div id="elem"></div>

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Ví dụ . Giá trị content-box

Và bây giờ hình nền sẽ bị đẩy lùi bởi padding:

html<div id="elem"></div>

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Ví dụ . Khi background-repeat: repeat

Khi background-repeat có giá trị repeat, thuộc tính background-origin luôn hoạt động như với giá trị border-box, tức là hình nền luôn tràn xuống dưới đường viền:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

Xem thêm