Deze studiegids laat zien hoe je achtergrondafbeeldingen kunt gebruiken met CSS. Laten we beginnen!
Hoe gebruik ik meerdere achtergrondafbeeldingen met CSS?
De CSS “ achtergrond ” eigenschap is een afgekorte eigenschap die eigenschappen voor achtergrond, achtergrondbijlage, clip, afbeelding, herhaling, oorsprong, grootte en positie bevat. De eigenschap background kan worden gebruikt om de URL's van meerdere afbeeldingen op te geven. Die afbeeldingen worden vervolgens gepositioneerd en dienovereenkomstig ingesteld.
Laten we een voorbeeld nemen waarin één div-element slechts één afbeelding bevat als het logo van de webpagina, terwijl het tweede element drie afbeeldingen bevat.
Voorbeeld: meerdere achtergrondafbeeldingen toevoegen met CSS
Voeg in HTML een div-element voor het logo toe en geef de klassenaam op. We noemden het bijvoorbeeld ' logo ”. De tweede div gebruikt meerdere afbeeldingen, dus we noemden het ' meerdere afbeeldingen ”. U kunt echter de klassenaam opgeven volgens uw voorkeuren.
HTML
< div klas = 'logo' >< / div >< div klas = 'meerdere afbeeldingen' >< / div >
In het volgende gedeelte passen we de afbeeldingen aan met behulp van de eigenschap CSS-achtergrond.
Stijl “logo” div
.logo {breedte : 100% ;
hoogte : 50px ;
opvulling : 5px ;
marge : 5px ;
achtergrondformaat : 100px ;
achtergrond herhaling : geen herhaling ;
achtergrond afbeelding : url ( afbeeldingen/linux-logo.png ) ;
}
Het div-element met de klasse “ logo ” wordt toegepast met de volgende eigenschappen:
- “ breedte ” eigenschap wordt gebruikt om de breedte van het element in te stellen op “ 100% ”.
- “ hoogte ” eigenschap wordt gebruikt om de hoogte van het element in te stellen op “ 50px ”.
- “ opvulling ” eigenschap wordt gebruikt voor het instellen van de “ 5px ” ruimte rond de gespecificeerde inhoud van het element.
- “ marge ” eigenschap wordt gebruikt voor het instellen van de “ 5px ” ruimte rond het element.
- “ achtergrondformaat ” eigenschap stelt de grootte van de achtergrondafbeelding van het element in als “ 100px ”.
- “ achtergrond herhaling ” met de waarde “ geen herhaling ” geeft de achtergrond slechts één keer weer.
- “ achtergrond afbeelding ” eigenschap wordt gebruikt voor het specificeren van de URL van de afbeelding.
Stijl “meerdere afbeeldingen” div
.meerdere afbeeldingen {breedte : 90% ;
hoogte : 45vh ;
marge : 1px auto ;
opvulling : 20px ;
achtergrondformaat : 150px ;
Achtergrond kleur : RGB ( 157 , 154 , 151 ) ;
achtergrond afbeelding : url ( afbeeldingen/kantoor.png ) , url ( afbeeldingen/html.png ) , url ( afbeeldingen/laptop.png ) ;
achtergrond herhaling : geen herhaling , geen herhaling , geen herhaling ;
achtergrond-positie : links , centrum , rechts ;
}
Style nu de andere container als volgt:
- “ Achtergrond kleur ” eigenschap specificeert de kleur van de achtergrond van het element.
- “ achtergrond afbeelding ” eigenschap specificeert meerdere afbeeldings-URL's.
- “ achtergrond herhaling ” eigenschap stelt waarden in voor de afbeeldingen in een reeks afbeeldingen die zijn opgegeven in de eigenschap background-image. Beide afbeeldingen zijn ingesteld als niet-herhaald, wat betekent dat ze slechts één keer in de browser worden weergegeven.
- “ achtergrond-positie ” past de afbeeldingspositie aan in de volgorde van de afbeeldingen die zijn opgegeven door de eigenschap background-image. De eerste afbeelding wordt aan de linkerkant geplaatst, de tweede in het midden en de derde aan de rechterkant.
Door de hierboven verstrekte code op te geven, ziet het resultaat in de browser er als volgt uit:
Zo kunnen we met CSS de positie van meerdere afbeeldingen aanpassen.
Conclusie
Om de applicatie leuk en interactief te maken, gebruiken ontwikkelaars verschillende afbeeldingen en kleuren. We kunnen meerdere afbeeldingen instellen met CSS-achtergrondeigenschappen, zoals achtergrondpositie, achtergrondherhaling, achtergrondgrootte en meer. Deze handleiding heeft het gebruik van meerdere achtergrondafbeeldingen gedemonstreerd met CSS-voorbeelden.