Sifat background-origin

Sifat background-origin menetapkan bagaimana gambar latar belakang (khususnya gambar, bukan warna latar) akan diletakkan relatif kepada elemen: sebahagian gambar latar belakang akan menjalar di bawah sempadan, latar belakang tidak akan menjalar di bawah sempadan atau latar belakang hanya akan diletakkan di atas kandungan elemen (iaitu padding akan mengalihkan latar belakang).

Sintaks

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

Nilai

Nilai lalai: padding-box.

Nota

Sifat background-origin tidak berfungsi, apabila background-attachment mempunyai nilai fixed. Juga dengan background-repeat pada nilai repeat, sifat background-origin sentiasa berfungsi seperti nilai border-box.

Contoh . Secara Lalai

Secara lalai, latar belakang tidak akan menjalar di bawah sempadan:

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 belakang akan menjalar di bawah sempadan:

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

Sekarang latar belakang akan dialihkan 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 . Dengan background-repeat: repeat

Dengan background-repeat pada nilai repeat, sifat background-origin sentiasa berfungsi, seperti nilai border-box, iaitu latar belakang sentiasa menjalar di bawah sempadan:

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