Hvordan bruke flere bakgrunnsbilder med CSS

Mens han utvikler en hvilken som helst applikasjon, må utvikleren opprettholde søknadens interaktivitet. Det er flere funksjoner som kan hjelpe deg med å trekke brukerens oppmerksomhet, for eksempel farger, bilder, GIF -er og mer. For å legge til et bilde til nettstedet, html “”Tag kan brukes. Mens for å legge til flere bilder med CSS, "bakgrunnsbilde”Eiendom brukes med nettadressene til bildene.

Denne studieguiden vil demonstrere hvordan du bruker bakgrunnsbilder med CSS. Så la oss begynne!

Hvordan bruke flere bakgrunnsbilder med CSS?

CSS “bakgrunn”Eiendom er en shorthand-eiendom som inneholder bakgrunn, bakgrunn, klipp, bilde, gjenta, opprinnelse, størrelse og posisjonsegenskaper. Bakgrunnsegenskapen kan brukes til å spesifisere nettadressene til flere bilder. Disse bildene er deretter plassert og satt deretter.

La oss ta et eksempel der ett DIV -element bare inneholder ett bilde som websiden -logoen mens den andre inneholder tre bilder.

Eksempel: Legge til flere bakgrunnsbilder med CSS

I HTML, legg til et divelement for logoen og spesifiser klassenavnet. For eksempel kalte vi det “logo”. Den andre diven bruker flere bilder, så vi kalte den “Flere bilder”. Du kan imidlertid spesifisere klassenavnet i henhold til dine preferanser.

Html

I neste avsnitt vil vi justere bildene ved hjelp av CSS bakgrunnsegenskap.

Stil “logo” div

.logo
Bredde: 100%;
Høyde: 50px;
polstring: 5px;
Margin: 5px;
Bakgrunnsstørrelse: 100px;
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsbilde: URL (bilder/Linux-logo.png);

Div -elementet med klassen “logo”Brukes med følgende egenskaper:

• “bredde”Eiendom brukes til å sette elementets bredde til“100%”.
• “høyde”Eiendom brukes til å sette høyden på elementet til“50px”.
• “polstring”Eiendom brukes til å stille inn“5px”Plass rundt det spesifiserte innholdet i elementet.
• “margin”Eiendom brukes til å stille inn“5px”Plass rundt elementet.
• “bakgrunnsstørrelse”Eiendom setter elementets bakgrunnsbildestørrelse som“100px”.
• “Bakgrunnsrepetitt”Med verdien”Ingen repeter”Viser bakgrunnen bare en gang.
• “bakgrunnsbilde”Eiendom brukes til å spesifisere bildens URL.

Stil “flere bilder” div

.flere bilder
Bredde: 90%;
Høyde: 45VH;
Margin: 1px auto;
polstring: 20px;
Bakgrunnsstørrelse: 150px;
bakgrunnsfarge: RGB (157, 154, 151);
Bakgrunnsbilde: URL (bilder/kontor.png), url (bilder/html.png), url (bilder/laptop.png);
Bakgrunnsrepetitt: Ingen repetisjon, ingen repetisjon, ingen repetisjon;
Bakgrunnsposisjon: Venstre, sentrum, høyre;

Stil den andre beholderen som følger:

• “bakgrunnsfarge”Eiendom spesifiserer fargen på elementets bakgrunn.
• “bakgrunnsbilde”Eiendom spesifiserer flere nettadresser.
• “Bakgrunnsrepetitt”Egenskaper angir verdier for bildene i en sekvens av bildene som er spesifisert i bakgrunnsbildeegenskapen. Begge bildene er satt som ikke-gjentatte betyr at de bare vil vise i nettleseren en gang.
• “Bakgrunnsposisjon”Justerer bildeposisjonen i sekvensen til bildene som er spesifisert av bakgrunnsbildeegenskapen. Det første bildet blir satt på venstre side, det andre i sentrum og det tredje blir plassert på høyre side.

Ved å gi den ovennevnte koden, vil resultatet i nettleseren se slik ut:

På denne måten kan vi justere plasseringen av flere bilder med CSS.

Konklusjon

For å gjøre applikasjonen underholdende og interaktiv, bruker utviklere forskjellige bilder og farger. Vi kan angi flere bilder med CSS bakgrunnsegenskaper, for eksempel bakgrunnsstilling, bakgrunnsrepetitt, bakgrunnsstørrelse og mer. Denne håndboken har vist bruken av flere bakgrunnsbilder med CSS -eksempler.