CSS verskeie agtergronde
In hierdie hoofstuk sal jy leer hoe om veelvuldige agtergrondprente by een element te voeg.
Jy sal ook leer oor die volgende eienskappe:
background-sizebackground-originbackground-clip
CSS verskeie agtergronde
Met CSS kan u verskeie agtergrondprente vir 'n element byvoeg deur die
background-imageeiendom.
Die verskillende agtergrondprente word deur kommas geskei, en die beelde word bo-op mekaar gestapel, waar die eerste beeld die naaste aan die kyker is.
Die volgende voorbeeld het twee agtergrondprente, die eerste prent is 'n blom (belyn na onder en regs) en die tweede prent is 'n papieragtergrond (belyn met die boonste linkerhoek):
Voorbeeld
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Veelvuldige agtergrondprente kan gespesifiseer word deur óf die individuele agtergrondeienskappe (soos hierbo) óf die backgroundsnelskrif-eienskap te gebruik.
Die volgende voorbeeld gebruik die backgroundsnelskrif-eienskap (dieselfde resultaat as voorbeeld hierbo):
Voorbeeld
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
CSS-agtergrondgrootte
Die CSS background-size-eienskap laat jou toe om die grootte van agtergrondprente te spesifiseer.
Die grootte kan gespesifiseer word in lengtes, persentasies, of deur een van die twee sleutelwoorde te gebruik: bevat of bedek.
Die volgende voorbeeld verander die grootte van 'n agtergrondprent tot baie kleiner as die oorspronklike prent (met behulp van piksels):
Dank Hom vir Pyn
Die pyn self is die liefde
Daarom is dit vir die geringste wat kom, wie ons normale praktyk verdra om voordeel te trek uit die gevolge
Hier is die kode:
Voorbeeld
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Die twee ander moontlike waardes vir background-sizeis contain
en cover.
Die containsleutelwoord skaal die agtergrondprent om so groot as moontlik te wees (maar beide sy breedte en sy hoogte moet binne die inhoudsarea pas). As sodanig, afhangende van die verhoudings van die agtergrondprent en die agtergrondposisioneringsarea, kan daar sommige areas van die agtergrond wees wat nie deur die agtergrondprent gedek word nie.
Die coversleutelwoord skaal die agtergrondprent sodat die inhoudsarea heeltemal deur die agtergrondprent bedek word (beide sy breedte en hoogte is gelyk aan of oorskry die inhoudsarea). As sodanig is sommige dele van die agtergrondprent dalk nie sigbaar in die agtergrondposisioneringsarea nie.
Die volgende voorbeeld illustreer die gebruik van containen cover:
Voorbeeld
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Definieer groottes van veelvuldige agtergrondprente
Die background-sizeeiendom aanvaar ook veelvuldige waardes vir agtergrondgrootte (met behulp van 'n komma-geskeide lys), wanneer daar met veelvuldige agtergronde gewerk word.
Die volgende voorbeeld het drie agtergrondprente gespesifiseer, met verskillende agtergrondgrootte waardes vir elke prent:
Voorbeeld
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Volgrootte agtergrondprent
Nou wil ons 'n agtergrondprent op 'n webwerf hê wat te alle tye die hele blaaiervenster dek.
Die vereistes is soos volg:
- Vul die hele bladsy met die prent (geen wit spasie nie)
- Skaal beeld soos nodig
- Sentreer prent op bladsy
- Moenie skuifbalke veroorsaak nie
Die volgende voorbeeld wys hoe om dit te doen; Gebruik die <html>-element (die <html>-element is altyd ten minste die hoogte van die blaaiervenster). Stel dan 'n vaste en gesentreerde agtergrond daarop. Pas dan sy grootte aan met die agtergrondgrootte-eienskap:
Voorbeeld
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Heldebeeld
Jy kan ook verskillende agtergrondeienskappe op 'n <div> gebruik om 'n heldbeeld ('n groot prent met teks) te skep en dit te plaas waar jy wil.
Voorbeeld
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
CSS agtergrond-oorsprong eiendom
Die CSS background-origin-eienskap spesifiseer waar die agtergrondprent geposisioneer is.
Die eiendom neem drie verskillende waardes:
- border-box - die agtergrondprent begin vanaf die boonste linkerhoek van die grens
- padding-box - (verstek) die agtergrondprent begin vanaf die boonste linkerhoek van die opvulrand
- inhoud-boks - die agtergrondprent begin vanaf die boonste linkerhoek van die inhoud
Die volgende voorbeeld illustreer die background-origineiendom:
Voorbeeld
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS agtergrond-snit Eiendom
Die CSS background-clip-eienskap spesifiseer die skilderarea van die agtergrond.
Die eiendom neem drie verskillende waardes:
- border-box - (verstek) die agtergrond is geverf na die buiterand van die rand
- padding-box - die agtergrond is geverf na die buiterand van die padding
- inhoud-boks - die agtergrond is geverf binne die inhoud boks
Die volgende voorbeeld illustreer die background-clipeiendom:
Voorbeeld
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
CSS Gevorderde Agtergrond Eienskappe
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |