background-origin հատկությունը

background-origin հատկությունը սահմանում է, թե ինչպես ֆոնային նկարը (հենց նկարը, ոչ թե լցումը) կտեղադրվի տարրի նկատմամբ. ֆոնային նկարի մի մասը կմտնի սահմանի տակ, ֆոնը չի մտնի սահմանի տակ կամ ֆոնը կտեղադրվի միայն տարրի բովանդակության վրա (այսինքն padding կհեռացնի ֆոնը):

Շարահյուսություն

cssընտրիչ {
  background-origin: padding-box | border-box | content-box;
}

Արժեքներ

Լռելյայն արժեքը՝ padding-box:

Ծանոթագրություններ

background-origin հատկությունը չի աշխատում, երբ background-attachment ունի fixed արժեքը: Նաև երբ background-repeat ունի repeat արժեքը, background-origin հատկությունը միշտ աշխատում է ինչպես border-box արժեքի դեպքում:

Օրինակ . Լռելյայն

Լռելյայն ֆոնը չի մտնի սահմանի տակ.

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

Результат:

Օրինակ . border-box արժեքը

Այժմ ֆոնը կմտնի սահմանի տակ.

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

Результат:

Օրինակ . content-box արժեքը

Իսկ այժմ ֆոնը կհեռանա 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;
}

Результат:

Օրինակ . Երբ background-repeat: repeat

Երբ background-repeat-ն ունի repeat արժեքը, background-origin հատկությունը միշտ աշխատում է ինչպես border-box արժեքի դեպքում, այսինքն ֆոնը միշտ մտնում է սահմանի տակ.

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

Результат:

Տես նաև