CSS agtergrond-grootte eiendom
Voorbeeld
Spesifiseer die grootte van 'n agtergrondprent met "outo" en in pixels:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die background-sizeeiendom spesifiseer die grootte van die agtergrond beelde.
Daar is vier verskillende sintakse wat jy met hierdie eienskap kan gebruik: die sleutelwoordsintaksis ("outo", "omslag" en "bevat"), die eenwaarde-sintaksis (stel die breedte van die prent (hoogte word "outo"), die tweewaarde-sintaksis (eerste waarde: breedte van die beeld, tweede waarde: hoogte), en die veelvuldige agtergrondsintaksis (geskei met komma).
| Standaard waarde: | outo |
|---|---|
| Geërf: | geen |
| Animateerbaar: | ja. Lees oor animeerbaar |
| Weergawe: | CSS3 |
| JavaScript-sintaksis: | voorwerp .style.backgroundSize="60px 120px" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit-, -moz-, of -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
CSS-sintaksis
background-size: auto|length|cover|contain|initial|inherit;
Eiendomswaardes
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelde
Voorbeeld
Spesifiseer die grootte van 'n agtergrondprent met persentasie:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Voorbeeld
Spesifiseer die grootte van 'n agtergrondprent met "omslag":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Voorbeeld
Spesifiseer die grootte van 'n agtergrondprent met "contain":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Voorbeeld
Hier het ons twee agtergrondprente. Ons spesifiseer die grootte van die eerste agtergrondprent met "contain", en die tweede agtergrondprent met "cover":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Voorbeeld
Gebruik verskillende agtergrondeienskappe om 'n "held"-beeld te skep:
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Verwante bladsye
CSS-tutoriaal: CSS-agtergronde
HTML DOM verwysing: backgroundSize eiendom