Använda Bakgrundsbilder på Element
background-image-egenskapen gör det möjligt att lägga till en bild som bakgrund på ett HTML-element. Den grundläggande syntaxen är mycket enkel:
background-image: url("image-url.jpg");
Som värde för background-image-egenskapen används url(), och inom dessa parenteser anges bildens url.
index.html
index.css
background-repeat
Anger om bilden ska upprepas horisontellt, vertikalt, både eller inte alls.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position används för att ange startpositionen för en bakgrundsbild inom ett elements bakgrundsyta. Denna egenskap låter oss specificera var bakgrundsbilden ska placeras och hur den ska positioneras i förhållande till elementet. Vi måste ange positionen på x- och y-axeln
background-position: x y
index.html
index.css
background-size
Styr hur bakgrundsbilden skalas:
background-size: auto | cover | contain | value in px/em/rem;
auto: ursprunglig bildstorlek;cover: fyller hela elementet, kan beskäras;contain: anpassar hela bilden, kan lämna tomt utrymme;value: anpassad storlek (t.ex.100px50px,50%).
index.html
index.css
1. Vad gör egenskapen background-image?
2. Vad gör egenskapen background-repeat?
3. Vilken egenskap bestämmer positionen för ett elements bakgrundsbild?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Fantastiskt!
Completion betyg förbättrat till 2.56Använda Bakgrundsbilder på Element
Svep för att visa menyn
background-image-egenskapen gör det möjligt att lägga till en bild som bakgrund på ett HTML-element. Den grundläggande syntaxen är mycket enkel:
background-image: url("image-url.jpg");
Som värde för background-image-egenskapen används url(), och inom dessa parenteser anges bildens url.
index.html
index.css
background-repeat
Anger om bilden ska upprepas horisontellt, vertikalt, både eller inte alls.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position används för att ange startpositionen för en bakgrundsbild inom ett elements bakgrundsyta. Denna egenskap låter oss specificera var bakgrundsbilden ska placeras och hur den ska positioneras i förhållande till elementet. Vi måste ange positionen på x- och y-axeln
background-position: x y
index.html
index.css
background-size
Styr hur bakgrundsbilden skalas:
background-size: auto | cover | contain | value in px/em/rem;
auto: ursprunglig bildstorlek;cover: fyller hela elementet, kan beskäras;contain: anpassar hela bilden, kan lämna tomt utrymme;value: anpassad storlek (t.ex.100px50px,50%).
index.html
index.css
1. Vad gör egenskapen background-image?
2. Vad gör egenskapen background-repeat?
3. Vilken egenskap bestämmer positionen för ett elements bakgrundsbild?
Tack för dina kommentarer!
