CSS är en förkortning för Cascading Style Sheets. Det är ett enkelt men ändå kraftfullt designspråk som har förmågan att omvandla webbsidor. Enkelt uttryckt effektiviserar det processen att göra webbsidor presenterbara och tilltalande för användarna med hjälp av . I den här artikeln kommer vi att förstå hur man implementerar olika bakgrundsbilder i CSS i följande ordning:
- Bakgrundsbild i CSS-egenskaper
- Bakgrundsbild i CSS
- Bakgrund upprepa
- Bakgrundsbilaga
- Bakgrundsposition
- Bakgrundsbild i CSS-storlek
- Bakgrundsfärg
Bakgrundsbild i CSS-egenskaper
Det finns många egenskaper som används för att styra beteenden och positioneringen av bilden. Dessa egenskaper är:
- bakgrundsbild
- bakgrund-upprepa
- bakgrundsbilaga
- bakgrundsposition
- bakgrundsstorlek
- bakgrundsfärg
Vi kommer att bekanta oss med var och en av dessa egenskaper och se när och hur man använder dem med en intressant demonstration.
Bakgrundsbild i CSS
De bakgrundsbild egenskap som namnet antyder används helt enkelt för att ange och ställa in bakgrundsbilden genom ett element på en webbsida. En bakgrundsbild är som standard placerad längst upp till vänster på ett element.
syntax: bakgrundsbild: url | ingen | linjär gradient | radiell gradient
body {background-image: url ('apple.jpg')}bakgrund med url
Låt oss förstå parametrarna:
- url: Ingången till den här parametern låter oss ange antingen en filsökväg till valfri bild eller URL till bilden som måste ställas in som bakgrund. För att deklarera mer än en bild separeras webbadresserna med en kommaavgränsare.
body {background-image: url ('apple.jpg')} 
- ingen: Detta är egenskapens standardvärde och ingen bakgrundsbild återges om dess värde anges.
kropp {bakgrund: ingen}- linjär gradient (): Bakgrundsbilden är inställd på en linjär lutning. Minst två färger måste anges för den här egenskapen, dvs för topp till botten.
kropp {bakgrundsfärg: # 001 bakgrundsbild: linjär gradient (vit 15%, transparent 16%), linjär gradient (vit 15%, transparent 16%) bakgrundsstorlek: 60px 60px bakgrundsposition: 0 0, 30px 30px}- radiell gradient (): Bakgrundsbilden är inställd på en radiell lutning. Minst två färger måste anges för den här egenskapen, dvs för mitt till kanter.
body {background-color: # 001 background-image: radial-gradient (white 15%, transparent 16%), radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- repeterande-linjär-gradient (): Det upprepar en linjär lutning. Låt oss använda samma exempel som vi såg ovan i linjär gradient för repeterande-linjär-gradient och se skillnaden.
kropp {bakgrundsfärg: # 001 bakgrundsbild: repeterande-linjär-gradient (vit 15%, transparent 16%), upprepande-linjär-gradient (vit 15%, transparent 16%) bakgrundsstorlek: 60px 60px bakgrundsposition : 0 0, 30px 30px}- repeterande-radiell-gradient (): Det upprepar en radiell gradient. Låt oss utforska samma exempel som vi använde ovan i en radiell gradient.
body {background-color: # 001 background-image: repeating-radial-gradient (white 15%, transparent 16%), repeating-radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}Fallback bakgrund
Det rekommenderas alltid som ett professionellt tips att lägga till en bakgrundsfärg som ett alternativ. Det kommer att rädda, särskilt när antingen bakgrundsbilderna inte laddas eller om den bakgrund som vi ställer in under utvecklingen inte stöds av några av de gamla webbläsarna den visas på.
Detta förstör inte användarupplevelsen och kan förklaras så här:
body {background: url (apple_lost.jpg) pink}Flera bakgrund
sammanfoga sortera c ++ implementering
Vi har också ett alternativ att ställa in flera bakgrundsbilder och det krävs i de flesta fall som en förgrund och bakgrundsbild. Bildens ordning är viktig här, bilden som ska vara längst fram deklareras först och bilden som ska vara längst bak deklareras därefter.
Nedan följer exemplet för flera bakgrundsbilder:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Bakgrund upprepa
Egenskapen bakgrundsupprepning används tillsammans med bakgrundsbilden för att definiera en bilds upprepningsbeteende. Den anger om och hur en bakgrundsbild ska upprepas. Bakgrundsbilden upprepas som standard både vertikalt och horisontellt.
De möjliga värdena är:
- repetera- Bilden upprepas både horisontellt och vertikalt
- no-repeat - Bilden upprepas inte
- repeat-x - Bilden upprepas horisontellt
- repeat-y - Bilden upprepas vertikalt
- space- Bilden upprepas med jämna mellanrum eller mellanrum mellan.
- rund - Bilden upprepas för att fylla området utan några mellanrum mellan dem.
CSS-syntaxen för bakgrundsupprepningsegenskapen är:
bakgrundsupprepning: upprepa | upprepa-x | upprepa-y | ingen upprepa | mellanslag | runda
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Bakgrundsbilaga
De bakgrundsbilaga egenskapen används tillsammans med bakgrundsbilden för att ange om bilden ska bläddra när innehållet rullas. Det betyder att bakgrundsbilden ska fixas eller ska bläddra tillsammans med dokumentet i förhållande till webbläsarens fönstervy. Standardvärdet är att bläddra.
De möjliga värdena är:
- bläddra - bilden rullar längs med sidan.
- fast - Bilden rullar inte längs med sidan
CSS-syntaxen för bakgrundsbilagan är:
bakgrundsbilaga: bläddra | fast
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Bakgrundsposition
De bakgrundsposition egenskap används för att beteckna platsen eller placeringen av en bakgrundsbild. De möjliga värdena är:
- topp
- rätt
- botten
- vänster
- Centrum
- kombination av dessa värden (t.ex. vänster uppe)
CSS-syntaxen för bakgrundspositionen är:
bakgrundsposition: upp | höger | vänster | nedre | mitt
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Bakgrundsbild i CSS-storlek
Den här egenskapen är en av de mest användbara eftersom den låter oss kontrollera storleken på bakgrundsbilden. Det finns olika kombinationer vi kan använda med den här egenskapen och få resultat därefter. Standardvärdet är auto.
Följande värden kan användas med bakgrundsstorlek:
- bil
- en längd- och bildbredd t.ex. 20px 40px.
- en procentuell höjd och bredd på bilden som en procentuell w.r.t överordnad element t.ex. 50% 50%.
- center- Justera bilden mot mitten
- täcker och skalar bilden så att den täcks helt av bakgrundsområdet.
- innehåller, skalar bilden så att den passar till dess faktiska höjd och bredd.
CSS-syntaxen för bakgrundspositionen är:
bakgrundsstorlek: värde
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contain, 400px 150px}funktion överbelastning c ++
Bakgrundsfärg
Detta är det enklaste av alla egenskaper i CSS. Den applicerar solida färger på bakgrunden på sidan. Värdet för den här egenskapen kan anges i färger (t.ex. röd, blå, etc), hex-värde och RGB-värde.
CSS-syntaxen för bakgrundsfärgen är:
bakgrundsfärg: värde
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Detta avslutar alla egenskaper som vi kan använda med bakgrunden. Vi kan alltid prova olika kombinationer av fastigheterna som vi såg i vår demonstration.
CSS är viktigt och måste förvärva färdigheter för alla front-end webbutvecklare. Det hjälper när du utformar och stylar bakgrunden och bygger imponerande webbplatser och berikar användarupplevelsen. Det bästa är att fortsätta experimentera och dra full nytta av denna speciella front-end-teknik eftersom den kan göra underverk och dynamiskt omvandla sidan.
Kolla in vår som kommer med instruktörsledad liveutbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på 'Bakgrundsbild i CSS' -bloggen så återkommer vi till dig.