7 CSS-bakgrundsegenskaper för att liva upp din webbdesign

Bakgrundstemat för din webbplats kan avsevärt påverka dess utseende och känsla. Färger, bilder och bakgrundsmönster framkallar känslor och skapar fantastiska användarupplevelser.

Du kan använda CSS-bakgrundsegenskaper för att ställa in bakgrundsstilen för HTML-element. Lär dig allt om några av de CSS-egenskaper du kan använda för att skapa utmärkta bakgrunder.

1. bakgrundsfärg

De bakgrundsfärgsegenskap anger färgen på bakgrunden för ett element. Du kan ställa in färgen med ett namn som "röd", ett HEX-värde som "#00FF00" eller ett RGB-värde - som "rgb (0, 255, 0)". Du kan också använda ett HSL-värde för att ställa in bakgrundsfärgen med nyans, mättnad och ljushet.

Följande exempel ställer in bakgrundsfärgen på hela sidan till orange. Rubrikelementen får var och en olika bakgrund.

<kropp>
<h2>Jag är grönh2>
<h3>Jag är rödh3>
<h4>Jag är blåh4>
kropp>

Med CSS kan du använda en unik bakgrundsfärg på varje element:

kropp {
bakgrundsfärg: orange;
}
h2 {
bakgrundsfärg: #006600;
}
h3 {
bakgrundsfärg: rgb(128, 0, 0);
}
h4{
bakgrundsfärg: hsl(240, 100%, 50%);
}

Detta kommer att stila sidan så att den ser ut så här:

Du kan använda opacitetsegenskapen för att bestämma transparensen för ett element. Opaciteten tar värden mellan 0,0 och 1,0. Ju lägre värde, desto mer transparent är elementet.

Som ett exempel, försök att ställa in opaciteten för ett kroppselement till 0,5:

kropp {
bakgrundsfärg:orange;
opacitet:0.5;
}

Detta kommer att visas enligt följande - jämför färgerna med de i föregående skärmdump:

2. bakgrundsbild

Egenskapen background-image ställer in en bild som bakgrund för ett element. Du kan referera till en lokal bild eller en från internet.

<kropp>
 <h1>Hallådär!h1>
 <sid>jaghaenbildiminbakgrund!sid>
kropp>

CSS-filen:

kropp {
bakgrundsbild:url("https://bilder.pexels.com/foton/1191710/pexels-foto-1191710.jpeg?bil=komprimera&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Detta kommer att visas så här:

Du kan också använda bakgrundsgradienter för att skapa ett unikt utseende för din applikation.

3. bakgrund-upprepa

Egenskapen bakgrundsbild upprepar bilder som standard. Du kan välja att upprepa bilden horisontellt på x-axeln eller vertikalt på y-axeln.

Alternativt, om en upprepning inte passar din stil, kan du ta bort den med värdet ingen upprepning.

<kropp>
<h1>Hej där!h1>
<h3>Jag demonstrerar egenskapen repeat background-repeat på x-axeln!h3>
kropp>

Använd följande CSS för att tillämpa en upprepad bakgrund längs x-axeln:

kropp {
bakgrundsbild: url("https://bilder.pexels.com/foton/459335/pexels-foto-459335.jpeg?bil=komprimera&cs=tinysrgb&w=1260&h=750&dpr=1");
bakgrund-upprepa: upprepa-x;
}

Resultatet:

Försök sedan att upprepa bilden på y-axeln:

kropp {
bakgrundsbild:url("https://cdn.pixabay.com/Foto/2016/04/18/22/05/snäckskal-1337565__340.jpg");
bakgrund-upprepa:upprepa-y;
}

Resultatet:

Exemplet på y-axeln ser verkligen förvrängt ut. Om det inte är dessa mönster du letar efter kan du specificera ingen upprepning istället:

kropp {
bakgrundsbild:url("https://bilder.pexels.com/foton/259915/pexels-foto-259915.jpeg?bil=komprimera&cs=tinysrgb&w=600");
bakgrund-upprepa: ingen upprepning;
}

Resultatet:

4. bakgrundsposition

Egenskapen background-position definierar positionen för bakgrundsbilden i dess element. Den använder positionsspecifika sökord som Centrum, topp, och botten, eller ett pixel- eller procentvärde.

Lägg till en bakgrundspositionsegenskap till den sista bilden:

kropp {
bakgrundsbild: url("https://bilder.pexels.com/foton/259915/pexels-foto-259915.jpeg?bil=komprimera&cs=tinysrgb&w=600");
bakgrundsposition: toppCentrum;
}

Det kommer att se ut så här:

Du kan se att bilden förvränger utseendet på webbplatsen. Låt oss fixa det med nästa fastighet.

5. bakgrundsstorlek

Du kan använda egenskapen bakgrundsbild för att definiera en specifik storlek för bilden. Den använder nyckelord som omslag och innehålla eller ett pixel- eller procentvärde. Låt oss fixa den förvrängda bakgrundsbilden genom att lägga till en egenskap i bakgrundsstorlek.

kropp {
 bakgrundsbild: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 bakgrundsupprepning: ingen upprepning;
 bakgrundsposition: mitten;

Resultatet visar att bilden nu täcker webbsidan proportionellt.

6. bakgrundsbilaga

Egenskapen background-attachment definierar om bakgrundsbildens position förblir fixerad eller rullar. Du kan använda nyckelorden fast eller rulla.

Låt oss visa det i följande kod:

<kropp>
<h1>Egenskapen för bakgrundsbilagah1>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
<sid>Med den fasta bifogade egenskapen kommer du att märka att bakgrunden inte rör sig med texten.sid>
kropp>

CSS-filen:

kropp {
bakgrundsbild: url("https://bilder.pexels.com/foton/96627/pexels-foto-96627.jpeg?bil=komprimera&cs=tinysrgb&w=600");
bakgrund-upprepa: ingen upprepning;
bakgrundsposition: Centrum;
bakgrundsstorlek: omslag;
bakgrundsbilaga: fast;
}

Om du flyttar ner på sidan kommer du att märka att bakgrunden inte rör sig:

För att demonstrera egenskapen scroll background-attachment, ändra nyckelordet till skrolla. Du kommer att märka att bakgrunden nu flyttas med texten.

kropp {
bakgrundsbild: url("https://bilder.pexels.com/foton/96627/pexels-foto-96627.jpeg?bil=komprimera&cs=tinysrgb&w=600");
bakgrund-upprepa: ingen upprepning;
bakgrundsposition: Centrum;
bakgrundsstorlek: omslag;
bakgrundsbilaga: skrolla;
}

7. Bakgrunden Shorthand Property

Du kanske märker att du måste inkludera flera egenskaper för att få den perfekta bakgrunden. Detta innebär att skriva mycket kod. Men du kan förkorta koden med bakgrundsegenskapen.

Egenskapen stenografi låter dig ställa in många bakgrundsegenskaper på en enda rad. Du använder nyckelordet bakgrund för att ställa in stenografiegenskapen.

Till exempel, istället för att skriva kod så här:

kropp {
bakgrundsfärg: grön;
bakgrundsbild: url("bärbar dator3.jpg");
bakgrund-upprepa: ingen upprepning;
bakgrundsstorlek: omslag;
bakgrundsbilaga: skrolla;
bakgrundsposition: Centrum;
}

Du kan skriva det på en rad, så här:

kropp {
bakgrund: grönurl("bärbar dator3.jpg") ingen upprepningomslagskrollaCentrum;
}

Stenografiegenskapen följer en viss ordning. Du måste justera egenskaperna i den ordningen även om en eller flera saknas. Beställningen är:

• bakgrundsfärg
• bakgrundsbild
• bakgrund-upprepa
• bakgrundsbilaga
• bakgrundsposition

Du kan skapa intressanta mönster med CSS med hjälp av olika bakgrundsmönster. Med dessa mönster kan du uppnå unika och enastående bakgrunder för din webbplats.

Andra bakgrundsegenskaper i CSS

CSS är kraftfullt och det finns mycket du kan göra med det för att krydda din applikation. Du kan använda egenskaper som bakgrundsklipp, bakgrundsursprung och bakgrundsblandningsläge för att lägga till lite animation.

Du kan också använda övertoningar och mönster för att anpassa dina sidor. Experimentera med CSS-bakgrundsegenskaper för att vässa dina färdigheter i webbdesign.