Com implementar la imatge de fons a CSS?

Aquest article us proporcionarà un coneixement detallat i exhaustiu de les imatges de fons en CSS. On utilitzar-lo i implementar el mateix.

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

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')}

Background-url

  • 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.