CSS és un acrònim de Cascading Style Sheets. És un llenguatge de disseny senzill però potent que té la capacitat de transformar pàgines web. En termes senzills, racionalitza el procés de creació de pàgines web presentables i atractives per als usuaris amb l'ajuda de . En aquest article, entendrem com implementar diverses imatges de fons a CSS en l’ordre següent:
- Imatge de fons a les propietats CSS
- Imatge de fons a CSS
- Repetiu el fons
- Adjunt de fons
- Posició de fons
- Imatge de fons en mida CSS
- Color de fons
Imatge de fons a les propietats CSS
Hi ha moltes propietats que s’utilitzen per controlar els comportaments i el posicionament de la imatge. Aquestes propietats són:
- imatge de fons
- repetir fons
- arxiu adjunt de fons
- posició de fons
- mida de fons
- color de fons
Ens familiaritzarem amb cadascuna d’aquestes propietats i veurem quan i com utilitzar-les amb alguna demostració interessant.
Imatge de fons a CSS
El imatge de fons La propietat, tal com el seu nom indica, s’utilitza simplement per indicar i configurar la imatge de fons a través d’un element d’una pàgina web. Per defecte, es col·loca una imatge de fons a l'extrem superior esquerre d'un element.
sintaxi: imatge de fons: url | cap | gradient lineal | gradient radial
body {background-image: url ('apple.jpg')}fons mitjançant URL
Comprenem els paràmetres:
- URL: L’entrada d’aquest paràmetre ens permet especificar un camí de fitxer cap a qualsevol imatge o l’URL de la imatge que s’ha d’establir com a fons. Per declarar més d’una imatge, les URL es separen amb un delimitador de comes.
body {background-image: url ('apple.jpg')} 
- cap: Aquest és el valor per defecte de la propietat i no es representa cap imatge de fons si s’especifica el seu valor.
cos {background: none}- gradient lineal (): La imatge de fons es defineix en un gradient lineal. Cal especificar un mínim de dos colors com a mínim per a aquesta propietat, és a dir, de dalt a baix.
body {background-color: # 001 background-image: gradient lineal (blanc 15%, transparent 16%), gradient lineal (blanc 15%, transparent 16%) mida de fons: 60px 60px posició de fons: 0 0, 30 px 30 px}- gradient radial (): La imatge de fons es defineix en un degradat radial. Cal especificar un mínim de dos colors com a mínim per a aquesta propietat, és a dir, del centre a les vores.
body {background-color: # 001 background-image: gradient radial (blanc 15%, transparent 16%), gradient radial (blanc 15%, transparent 16%) mida de fons: 60px 60px posició de fons: 0 0, 30 px 30 px}- gradient lineal repetitiu (): Repeteix un gradient lineal. Utilitzem el mateix exemple que hem vist anteriorment en el gradient lineal per repetir-lineal-gradient i veure la diferència.
body {background-color: # 001 background-image: gradient lineal repetitiu (blanc 15%, transparent 16%), gradient lineal repetitiu (blanc 15%, transparent 16%) mida de fons: 60px 60px posició de fons : 0 0, 30 px 30 px}tipus de dades de la data a l'exemple sql
- gradient radial repetitiu (): Repeteix un gradient radial. Anem a explorar el mateix exemple que hem utilitzat anteriorment en un gradient radial.
body {background-color: # 001 background-image: gradient radial repetitiu (blanc 15%, transparent 16%), gradient radial repetitiu (blanc 15%, transparent 16%) mida de fons: 60px 60px posició de fons : 0 0, 30 px 30 px}Fons alternatiu
Sempre és aconsellable com a consell professional afegir un color de fons com a opció alternativa. Es tracta de rescatar sobretot quan les imatges de fons no es carreguen o el degradat de fons que establim mentre desenvolupem no és compatible amb alguns dels navegadors antics on es visualitzen.
Això no fa malbé l'experiència de l'usuari i es pot declarar així:
cos {background: url (apple_lost.jpg) rosa}Fons múltiple
També tenim l’opció d’establir diverses imatges de fons i, en la majoria dels casos, és obligatori, com ara una imatge de primer pla i de fons. L'ordre de la imatge és important aquí, la imatge que hauria d'estar a la part davantera es declara primer i la imatge que hauria d'estar a la part posterior es declara a continuació.
A continuació es mostra l'exemple de diverses imatges de fons:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Repetiu el fons
La propietat de repetició de fons s’utilitza juntament amb la imatge de fons per definir el comportament de repetició d’una imatge. Especifica si es repetirà i com es repetirà una imatge de fons. Per defecte, la imatge de fons es repeteix verticalment i horitzontalment.
Els valors possibles són:
- repetir: la imatge es repeteix tant horitzontalment com verticalment
- no repetir: la imatge no es repeteix
- repeat-x - La imatge es repeteix horitzontalment
- repeat-y: la imatge es repeteix verticalment
- espai: la imatge es repeteix amb espais parells o buits entre.
- rodona: la imatge es repeteix per omplir l'àrea sense espais entre ells.
La sintaxi CSS de la propietat background-repeat és:
repetició de fons: repetir | repetir-x | repetir-y | no repetir | espai | rodó
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Adjunt de fons
El arxiu adjunt de fons La propietat s'utilitza juntament amb la imatge de fons per indicar si la imatge s'ha de desplaçar a mesura que es desplaça el contingut. Significa que la imatge de fons s'ha de corregir o s'ha de desplaçar juntament amb el document en relació amb la vista de la finestra del navegador. El valor per defecte és desplaçar-se.
Els valors possibles són:
- scroll - La imatge es desplaça juntament amb la pàgina.
- fix: la imatge no es desplaçarà juntament amb la pàgina
La sintaxi CSS per al fitxer adjunt de fons és:
què poden controlar tots els nagios
arxiu adjunt de fons: desplaçament | fixat
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Posició de fons
El posició de fons La propietat s’utilitza per indicar la ubicació o el posicionament d’una imatge de fons. Els valors possibles són:
- superior
- dret
- inferior
- a l'esquerra
- centre
- combinació d’aquests valors (per exemple, a la part superior esquerra)
La sintaxi CSS per a la posició de fons és:
posició de fons: dalt | dreta | esquerra | inferior | centre
body {background-image: url ('heart.png') background-repeat: no repetir background-attachment: scroll}Imatge de fons en mida CSS
Aquesta propietat és una de les més útils, ja que ens permet controlar la mida de la imatge de fons. Hi ha diferents combinacions que podem utilitzar amb aquesta propietat i obtenir resultats en conseqüència. El valor per defecte és automàtic.
Els valors següents es poden utilitzar amb la mida de fons:
- automàtic
- una longitud, alçada i amplada de la imatge, 20 px 40 px.
- un percentatge: alçada i amplada de la imatge com a percentatge de l'element pare, per exemple, 50% 50%.
- centre- Alineeu la imatge al centre
- coberta, redimensionant la imatge per cobrir completament per l'àrea de fons.
- contenir, escalant la imatge perquè s’ajusti fins a la seva alçada i amplada reals.
La sintaxi CSS per a la posició de fons és:
mida de fons: valor
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no repetir, repetir mida de fons: 400 px 150 px, portada}body {background-image: url ('heart.png'), url ('background.png') background-repeat: sense repetir, repetir background-size: contain, 400px 150px}Color de fons
Aquesta és la més senzilla de totes les propietats de CSS. Aplica colors sòlids al fons de la pàgina. El valor d'aquesta propietat es pot especificar en colors (per exemple, vermell, blau, etc.), valor hexadecimal i valor RGB.
La sintaxi CSS per al color de fons és:
color de fons: valor
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}D’aquesta manera es conclouen totes les propietats que podem utilitzar amb el fons. Sempre podem provar diferents combinacions de propietats tal com vam veure a la nostra demostració.
CSS és essencial i ha d’adquirir habilitats per a tots els desenvolupadors web front-end. Ajuda a l'hora de dissenyar i dissenyar el fons i crear llocs web impressionants i enriquir l'experiència de l'usuari. El millor és continuar experimentant i aprofitar al màxim aquesta tecnologia frontal especial, ja que pot fer meravelles i transformar la pàgina de forma dinàmica.
Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Tens alguna pregunta? Esmenteu-lo a la secció de comentaris del bloc 'Imatge de fons a CSS' i us respondrem.