Strekk bakgrunnsbilde CSS?
Denne opplæringen vil demonstrere hvordan du kan strekke bakgrunnsbilder med CSS.
Hvordan strekke bakgrunnsbilde med CSS?
For å strekke bakgrunnsbildet med CSS, prøv de gitte instruksjonene.
Trinn 1: Opprett første div container
Først, legg til en "div”Container ved å bruke“”Merk og tilordne den en“id”Attributt inne i beholderen.
Trinn 2: Legg til overskrift
Legg til en overskrift ved å bruke “”Tag i HTML -dokumentet. “
”Tag brukes til å legge inn nivået en overskrift.
Trinn 3: Lag Second Div Container
Neste, lag en annen “”Container sammen med“klasse”Attributt, legg til en overskriftskode””Og innebygde overskriften. Etter det, legg til en annen "" ved å følge samme prosedyre:
Bakgrunnsstørrelse: Deksel:
Bakgrunnsstørrelse: 100% auto:
Trinn 4: Stil første containerklasse
Her får du tilgang til “" elementet som har klasse ”IMG-1" med hjelp av ".”Valg og bruk følgende egenskaper til CSS:
grense: 3px solid RGB (240, 12, 12);
Bredde: 500px;
Høyde: 200px;
Bakgrunn: URL (emoji.png);
Bakgrunnsstørrelse: Deksel;
Her:
- “grense”Eiendom setter en grense rundt elementet.
- “bredde”Definerer størrelsen på elementet horisontalt.
- “høyde”Angir elementstørrelsen vertikalt.
- “bakgrunn”Brukes for å fordele elementets bakgrunnsfarge.
- “bakgrunnsstørrelse”Eiendom med“dekke”Verdien brukes som bakgrunnsstørrelse som skalerer bildet for å fylle beholderen:
Trinn 5: Style Second Container Class
Få tilgang til den andre Div -beholderen ved å bruke klassenavnet “.IMG-2”Og bruk de gitte oppførte egenskapene:
Grense: 3px solid RGB (226, 17, 17);
Bredde: 500px;/ * Skjermbredde */
Høyde: 200px;/ * Skjermhøyde */
Bakgrunn: URL (emoji.png);
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsstørrelse: 100% auto;
I ovennevnte kodeblokk:
- “Bakgrunnsrepetitt”Eiendom brukes til å gjenta bildet langs de horisontale og vertikale aksene. Her er verdien satt som “Ingen repeter”For ikke å gjenta bildet.
- Og så "bakgrunnsstørrelse”Er satt som“100% auto”.
Produksjon
Det kan legges merke til at vi har strukket bakgrunnsbildet ved hjelp av CSS.
Konklusjon
For å strekke bakgrunnsbildet, først, bruk "bakgrunn”Eiendom for å angi bakgrunnsbilde for et element sammen med verdien som“URL”. Bruk deretter CSS -egenskapen "bakgrunnsstørrelse" som "dekke”Eller“100% auto”For å strekke bildet. Dette innlegget har lært deg hvordan CSS strekker bakgrunnsbildet.