Omadus background-origin
Omadus background-origin määrab,
kuidas taustapilt (täpsemalt pilt,
mitte värvimine) paigutatakse elemendi suhtes:
osa taustapildist ulatub piiri alla,
taust ei ulatu piiri alla
või taust paigutatakse ainult elemendi sisu kohale
(see tähendab, et padding
liigutab tausta eemale).
Süntaks
selektor {
background-origin: padding-box | border-box | content-box;
}
Väärtused
| Väärtus | Kirjeldus |
|---|---|
border-box |
Taustapilt ulatub piiri alla. |
padding-box |
Taustapilt ei ulatu piiri alla. |
content-box |
Taustapilt on ainult sisu kohal. |
Vaikeväärtus: padding-box.
Märkused
Omadus background-origin ei tööta,
kui background-attachment
omab väärtust fixed. Samuti, kui background-repeat
on väärtusega repeat, töötab omadus background-origin
alati nagu väärtusel border-box.
Näide . Vaikimisi
Vaikimisi ei ulatu taust piiri alla:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Näide . Väärtus border-box
Nüüd ulatub taust piiri alla:
<div id="elem"></div>
#elem {
background-origin: border-box;
background-image: url("bg.png");
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Näide . Väärtus content-box
Nüüd nihkub taust padding tõttu eemale:
<div id="elem"></div>
#elem {
background-origin: content-box;
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Näide . background-repeat: repeat korral
Kui background-repeat on väärtusel repeat, töötab omadus
background-origin alati
nagu väärtusel border-box, see tähendab, et taust
ulatub alati piiri alla:
<div id="elem"></div>
#elem {
background-repeat: repeat;
background-image: url("bg.png");
border: 10px dashed black;
padding: 30px;
width: 350px;
height: 300px;
}
:
Vaata ka
-
omadus
background-clip,
mis määrab nii taustapildi kui ka värvimise asukoha -
omadus
background,
mis on tausta lühendatud omadus