Aquesta guia d'estudi demostrarà com utilitzar imatges de fons amb CSS. Així doncs, comencem!
Com utilitzar diverses imatges de fons amb CSS?
El CSS ' fons La propietat ” és una propietat d'abreviatura que conté propietats de fons, fons adjunt, clip, imatge, repetició, origen, mida i posició. La propietat de fons es pot utilitzar per especificar els URL de diverses imatges. A continuació, aquestes imatges es col·loquen i es configuren en conseqüència.
Prenguem un exemple en què un element div només conté una imatge com a logotip de la pàgina web mentre que el segon conté tres imatges.
Exemple: afegir diverses imatges de fons amb CSS
En HTML, afegiu un element div per al logotip i especifiqueu el nom de la classe. Per exemple, el vam anomenar ' logotip ”. El segon div utilitza diverses imatges, així que el vam anomenar ' múltiples imatges ”. Tanmateix, podeu especificar el nom de la classe segons les vostres preferències.
HTML
< div classe = 'logotip' >< / div >< div classe = 'múltiples imatges' >< / div >
A la següent secció, ajustarem les imatges mitjançant la propietat de fons CSS.
Estil 'logotip' div
.logotip {amplada : 100% ;
alçada : 50 píxels ;
farciment : 5 píxels ;
marge : 5 píxels ;
mida de fons : 100 píxels ;
fons-repetició : no-repeat ;
imatge de fons : url ( images/linux-logo.png ) ;
}
L'element div amb la classe ' logotip ” s'aplica amb les propietats següents:
- “ amplada La propietat ' s'utilitza per establir l'amplada de l'element a ' 100% ”.
- “ alçada La propietat ' s'utilitza per establir l'alçada de l'element a ' 50 píxels ”.
- “ farciment La propietat s'utilitza per configurar el 5 píxels ” espai al voltant del contingut especificat de l'element.
- “ marge La propietat s'utilitza per configurar el 5 píxels ” espai al voltant de l'element.
- “ mida de fons ', la propietat estableix la mida de la imatge de fons de l'element com a ' 100 píxels ”.
- “ fons-repetició 'amb el valor' no-repeat ” mostra el fons només una vegada.
- “ imatge de fons ” s'utilitza per especificar l'URL de la imatge.
Estil div 'múltiples imatges'.
.múltiples imatges {amplada : 90% ;
alçada : 45vh ;
marge : 1px automàtic ;
farciment : 20 píxels ;
mida de fons : 150 píxels ;
color de fons : rgb ( 157 , 154 , 151 ) ;
imatge de fons : url ( imatges/oficina.png ) , url ( images/html.png ) , url ( imatges/ordinador portàtil.png ) ;
fons-repetició : no-repeat , no-repeat , no-repeat ;
posició de fons : esquerra , centre , dret ;
}
Ara, dissenyeu l'altre contenidor de la manera següent:
- “ color de fons ” La propietat especifica el color del fons de l'element.
- “ imatge de fons ” La propietat especifica diversos URL d'imatge.
- “ fons-repetició ” estableix valors per a les imatges en una seqüència d'imatges especificada a la propietat background-image. Les dues imatges s'estableixen com a no repetides, significa que només es mostraran una vegada al navegador.
- “ posició de fons ” ajusta la posició de la imatge en la seqüència d'imatges especificada per la propietat background-image. La primera imatge es col·locarà al costat esquerre, la segona al centre i la tercera es col·locarà al costat dret.
En proporcionar el codi proporcionat anteriorment, el resultat al navegador tindrà aquest aspecte:
D'aquesta manera, podem ajustar la posició de diverses imatges amb CSS.
Conclusió
Per fer que l'aplicació sigui entretinguda i interactiva, els desenvolupadors utilitzen diferents imatges i colors. Podem establir diverses imatges amb propietats de fons CSS, com ara posició de fons, repetició de fons, mida de fons i molt més. Aquest manual ha demostrat l'ús de diverses imatges de fons amb exemples CSS.