HTML agtergrond beelde
'n Agtergrondprent kan vir byna enige HTML-element gespesifiseer word.
Agtergrondprent op 'n HTML-element
Om 'n agtergrondprent op 'n HTML-element by te voeg, gebruik die HTML- style
kenmerk en die CSS - background-image
eienskap:
Voorbeeld
Voeg 'n agtergrondprent op 'n HTML-element by:
<div style="background-image: url('img_girl.jpg');">
U kan ook die agtergrondprent in die <style>
element spesifiseer, in die <head>
afdeling:
Voorbeeld
Spesifiseer die agtergrondprent in die <style>
element:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Agtergrondprent op 'n bladsy
As jy wil hê dat die hele bladsy 'n agtergrondprent moet hê, moet jy die agtergrondprent op die <body>
element spesifiseer:
Voorbeeld
Voeg 'n agtergrondprent vir die hele bladsy by:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Agtergrond Herhaal
As die agtergrondprent kleiner as die element is, sal die prent homself horisontaal en vertikaal herhaal totdat dit die einde van die element bereik:
Voorbeeld
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Om te verhoed dat die agtergrondprent homself herhaal, stel die background-repeat
eiendom op no-repeat
.
Voorbeeld
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Agtergrond Omslag
As jy wil hê dat die agtergrondprent die hele element moet bedek, kan jy die background-size
eiendom
instel opcover.
Om seker te maak dat die hele element altyd gedek is, stel die
background-attachment
eiendom ook opfixed:
Op hierdie manier sal die agtergrondprent die hele element bedek, sonder om te strek (die prent sal sy oorspronklike proporsies behou):
Voorbeeld
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Agtergrondrek
As jy wil hê dat die agtergrondprent moet strek om die hele element te pas, kan jy die background-size
eiendom stel op
100% 100%
:
Probeer die grootte van die blaaiervenster verander, en jy sal sien dat die prent sal strek, maar altyd die hele element dek.
Voorbeeld
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Kom meer te wete CSS
Uit die voorbeelde hierbo het jy geleer dat agtergrondprente gestileer kan word deur die CSS-agtergrondeienskappe te gebruik.
Om meer te wete te kom oor CSS-agtergrondeienskappe, bestudeer ons CSS-agtergrondhandleiding .