თვისება 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;
}

Результат:

იხილეთ აგრეთვე