Properti background-origin

Properti background-origin mengatur bagaimana gambar latar (khusus gambar, bukan isian) akan ditempatkan relatif terhadap elemen: bagian dari gambar latar akan masuk di bawah batas, latar tidak akan masuk di bawah batas atau latar hanya akan ditempatkan di atas konten elemen (yaitu padding akan menggeser latar).

Sintaks

cssselektor {
  background-origin: padding-box | border-box | content-box;
}

Nilai

Nilai default: padding-box.

Catatan

Properti background-origin tidak bekerja, ketika background-attachment memiliki nilai fixed. Juga ketika background-repeat dalam nilai repeat, properti background-origin selalu bekerja, seperti pada nilai border-box.

Contoh . Default

Secara default, latar tidak akan masuk di bawah batas:

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;
}

Результат:

Contoh . Nilai border-box

Sekarang latar akan masuk di bawah batas:

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;
}

Результат:

Contoh . Nilai content-box

Dan sekarang latar akan digeser oleh 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;
}

Результат:

Contoh . Pada background-repeat: repeat

Pada background-repeat dengan nilai repeat, properti background-origin selalu bekerja, seperti pada nilai border-box, artinya latar selalu masuk di bawah batas:

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;
}

Результат:

Lihat juga