Bakgrunnsbilde i CSS
I CSS, bakgrunnsbilde Eiendom brukes til å angi bakgrunnsbilde for enkelt- eller flere elementer. I CSS kan flere egenskaper brukes til å angi bakgrunnsbilde. Noen ofte brukte egenskaper er oppgitt nedenfor:
- bakgrunnsstørrelse Eiendom brukes til å justere størrelsen på bakgrunnsbildet.
- Bakgrunnsrepetitt Eiendom muliggjør eller deaktiverer repetisjonen av et bilde.
- Bakgrunnsposisjon Angir plasseringen av et bilde.
Denne oppskrivningen vil presentere en omfattende oversikt over bakgrunnsbildeegenskaper, hvor du vil lære å legge til et bakgrunnsbilde til et enkelt element eller hele kroppen.
Hvordan legge til et enkelt bakgrunnsbilde i CSS
Bakgrunnsbildeegenskapen brukes for det meste med kroppselementet, men det kan legges til ethvert spesifikt element som avsnitt, overskrifter, div osv. For å legge til bakgrunnsbildet.
Eksempel 1: Det undergitte kodestykket vil legge inn et bakgrunnsbilde på hele kroppen:
Bakgrunnsbilde
Velkommen til Linuxhint.com
Det vil vise følgende utgang:
I det ovennevnte eksemplet ble bildet plassert i samme mappe med HTML-fil, i URL Det tar bare bildetavnet med utvidelsen som vist i følgende utdrag:
La oss nå flytte bildet til en annen mappe, la si "Bilder":
Hvis bildet ikke er der i samme katalog enn vi må spesifisere den komplette banen til bildet, ellers vil vi ikke få de ønskede resultatene.
Eksempel 2: I stedet for å gi den komplette banen, vil dette eksemplet prøve å få tilgang til bildet bare med navnet:
Bakgrunnsbilde
Velkommen til Linuxhint.com
Bildet er plassert i bildene. Fra utgangen ville det være klart at hvis du ikke spesifiserer den nøyaktige banen, ville du ikke fått de ønskede resultatene som vist nedenfor:
Eksempel 2: La oss vurdere et eksempel der bildet er til stede i bildemappen mens HTML-filen er der i bakgrunnsbilde-mappen. I et slikt tilfelle spesifiserer vi den komplette banen til bildet som vist i følgende utdrag:
Bakgrunnsbilde
Velkommen til Linuxhint.com
I nettadressen kommer først to prikker "..." som stater flytter tilbake en katalog, så gå til "Bilder" Katalog der bildet er plassert og ved sluttbildetavnet kommer med utvidelsen som JGEG, PNG, etc. Nå vil dette programmet generere riktig utgang med bakgrunnsbilde som vist nedenfor:
Tilsvarende kan bakgrunnsbildet være innebygd med ethvert element som
,
, etc.
Hvordan legge til flere bakgrunnsbilder i CSS
I CSS kan flere bakgrunnsbilder legges til det samme elementet ved å tilby flere nettadresser.
Eksempel
Den undergitte koden vil legge til flere bilder på kroppselementet, dessuten vil den bruke noen flere egenskaper som bakgrunnsrepetitt, bakgrunnsstørrelse osv. som vist under:
Bakgrunnsbilde
Velkommen til Linuxhint.com
Ovennevnte kode bruker
- fargeegenskap for å angi gullfargen for teksten,
- Bakgrunnsbilde la til to bilder,
- Bakgrunnsstørrelse Angi bildens størrelse til 600px,
- Bakgrunnsposisjon for å samkjøre bildets posisjon til sentrum,
- Og til slutt tar bakgrunnsrepetisjonen "No-Repeat", noe som betyr at hvert bilde bare vises en gang.
Som et resultat vil det generere følgende utgang:
Fra utgangen kan du tydelig se at det blå.JPG -bildet er bak Linuxhint.JPEG -bilde som betyr at URLen du skriver først vises på toppen mens det andre bildet vises på baksiden/bak.
Konklusjon
bakgrunnsbilde Eiendom setter bakgrunnsbildet for enkelt- eller flere elementer. For å implementere et bakgrunnsbilde spesifiser bare nettadressen til bildet i bakgrunnsbildeegenskapen.
Denne artikkelen presenterte en detaljert oversikt over bakgrunnsbildeegenskaper. Til å begynne med forklarer det hvordan du legger til et enkelt bakgrunnsbilde i CSS. Etterpå ledet denne skrivingen hvordan du setter mer enn ett bakgrunnsbilder for et element.