Du tror måske, at baggrundsdesign er enkelt, men CSS har mange obskure og kraftfulde egenskaber, som du kan lære.
Baggrundstemaet på din hjemmeside kan påvirke dets udseende og fornemmelse markant. Farver, billeder og baggrundsmønstre fremkalder følelser og skaber gode brugeroplevelser.
Du kan bruge CSS-baggrundsegenskaber til at indstille baggrundsstilen for HTML-elementer. Lær alt om nogle af de CSS-egenskaber, du kan bruge til at skabe fremragende baggrunde.
1. baggrundsfarve
Det baggrundsfarve egenskab indstiller farven på baggrunden for et element. Du kan indstille farven ved at bruge et navn som "rød", en HEX-værdi som "#00FF00" eller en RGB-værdi - som "rgb (0, 255, 0)". Du kan også bruge en HSL-værdi til at indstille baggrundsfarven ved hjælp af nuance, mætning og lyshed.
Følgende eksempel indstiller baggrundsfarven på hele siden til orange. Overskriftselementerne får hver sin baggrund.
<legeme>
<h2>Jeg er grønh2>
<h3>Jeg er rødh3>
<h4>Jeg er blåh4>
legeme>Ved hjælp af CSS kan du anvende en unik baggrundsfarve til hvert element:
legeme {
baggrundsfarve: orange;
}h2 {
baggrundsfarve: #006600;
}h3 {
baggrundsfarve: rgb(128, 0, 0);
}
h4{
baggrundsfarve: hsl(240, 100%, 50%);
}
Dette vil style siden til at se ud:
Du kan bruge egenskaben opacitet til at bestemme gennemsigtigheden af et element. Opacitet tager værdier mellem 0,0 og 1,0. Jo lavere værdi, jo mere gennemsigtigt er elementet.
Prøv som et eksempel at indstille opaciteten af et kropselement til 0,5:
legeme {
baggrundsfarve:orange;
Gennemsigtighed:0.5;
}Dette vises som følger - sammenlign farverne med dem i det forrige skærmbillede:
2. baggrundsbillede
Egenskaben baggrundsbillede angiver et billede som baggrund for et element. Du kan henvise til et lokalt billede eller et fra internettet.
<legeme>
<h1>Hejder!h1>
<s>jegharenbilledeiminbaggrund!s>
legeme>CSS-filen:
legeme {
baggrundsbillede:url("https://billeder.pexels.com/fotos/1191710/pexels-foto-1191710.jpeg?auto=komprimere&cs=tinysrgb&w=1260&h=750&dpr=1");
}Dette vil vise sig sådan:
Du kan også bruge baggrundsgradienter at skabe et unikt look til din applikation.
3. baggrund-gentag
Egenskaben baggrundsbillede gentager billeder som standard. Du kan vælge at gentage billedet vandret på x-aksen eller lodret på y-aksen.
Alternativt, hvis en gentagelse ikke passer til din stil, kan du fjerne den ved at bruge værdien ingen gentagelse.
<legeme>
<h1>Hej med dig!h1>
<h3>Jeg demonstrerer egenskaben gentag baggrund-gentag på x-aksen!h3>
legeme>Brug følgende CSS til at anvende en gentagen baggrund langs x-aksen:
legeme {
baggrundsbillede: url("https://billeder.pexels.com/fotos/459335/pexels-foto-459335.jpeg?auto=komprimere&cs=tinysrgb&w=1260&h=750&dpr=1");
baggrund-gentag: gentag-x;
}Resultatet:
Prøv derefter at gentage billedet på y-aksen:
legeme {
baggrundsbillede:url("https://cdn.pixabay.com/Foto/2016/04/18/22/05/muslingeskaller-1337565__340.jpg");
baggrund-gentag:gentag-y;
}Resultatet:
Eksemplet på y-aksen ser bestemt forvrænget ud. Hvis det ikke er de mønstre, du leder efter, kan du angive ingen gentagelse i stedet:
legeme {
baggrundsbillede:url("https://billeder.pexels.com/fotos/259915/pexels-foto-259915.jpeg?auto=komprimere&cs=tinysrgb&w=600");
baggrund-gentag: ingen gentagelse;
}Resultatet:
4. baggrundsposition
Egenskaben baggrundsposition definerer placeringen af baggrundsbilledet i dets element. Den bruger positionsspecifikke søgeord som centrum, top, og bund, eller en pixel eller procentværdi.
Tilføj en baggrundspositionsegenskab til det sidste billede:
legeme {
baggrundsbillede: url("https://billeder.pexels.com/fotos/259915/pexels-foto-259915.jpeg?auto=komprimere&cs=tinysrgb&w=600");
baggrundsposition: topcentrum;
}Det vil se sådan ud:
Du kan se, at billedet forvrider udseendet af hjemmesiden. Lad os ordne det med den næste ejendom.
5. baggrundsstørrelse
Du kan bruge egenskaben for baggrundsbillede til at definere en bestemt størrelse for billedet. Den bruger søgeord som dække over og indeholde eller en pixel eller procentværdi. Lad os rette det forvrængede baggrundsbillede ved at tilføje en egenskab i baggrundsstørrelse.
krop {
baggrundsbillede: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
baggrund-gentag: ingen-gentagelse;
baggrundsposition: center;Resultatet viser, at billedet nu dækker websiden proportionalt.
6. baggrundsvedhæftning
Egenskaben for baggrundsvedhæftning definerer, om baggrundsbilledets position forbliver fast eller ruller. Du kan bruge nøgleordene fast eller rulle.
Lad os vise det i følgende kode:
<legeme>
<h1>Egenskaben for baggrundsvedhæftningh1>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
<s>Med den faste vedhæftede egenskab vil du bemærke, at baggrunden ikke flytter sig med teksten.s>
legeme>CSS-filen:
legeme {
baggrundsbillede: url("https://billeder.pexels.com/fotos/96627/pexels-foto-96627.jpeg?auto=komprimere&cs=tinysrgb&w=600");
baggrund-gentag: ingen gentagelse;
baggrundsposition: centrum;
baggrundsstørrelse: dække over;
baggrundsvedhæftning: fast;
}Hvis du bevæger dig ned på siden, vil du bemærke, at baggrunden ikke bevæger sig:
For at demonstrere egenskaben rullebaggrundsvedhæftning skal du ændre nøgleordet til rulle. Du vil bemærke, at nu flytter baggrunden sig med teksten.
legeme {
baggrundsbillede: url("https://billeder.pexels.com/fotos/96627/pexels-foto-96627.jpeg?auto=komprimere&cs=tinysrgb&w=600");
baggrund-gentag: ingen gentagelse;
baggrundsposition: centrum;
baggrundsstørrelse: dække over;
baggrundsvedhæftning: rulle;
}7. Baggrunden stenografi ejendom
Du bemærker måske, at du skal inkludere flere egenskaber for at få den perfekte baggrund. Dette involverer at skrive en masse kode. Men du kan forkorte koden ved at bruge egenskaben baggrundstenografi.
Egenskaben stenografi giver dig mulighed for at indstille mange baggrundsegenskaber på en enkelt linje. Du bruger søgeordet baggrund for at indstille stenografiegenskaben.
For eksempel, i stedet for at skrive kode som dette:
legeme {
baggrundsfarve: grøn;
baggrundsbillede: url("bærbar 3.jpg");
baggrund-gentag: ingen gentagelse;
baggrundsstørrelse: dække over;
baggrundsvedhæftning: rulle;
baggrundsposition: centrum;
}Du kan skrive det på en enkelt linje, sådan her:
legeme {
baggrund: grønurl("bærbar 3.jpg") ingen gentagelsedække overrullecentrum;
}Stenografiegenskaben følger en bestemt rækkefølge. Du skal justere egenskaberne i den rækkefølge, selvom en eller flere mangler. Ordren er:
- baggrundsfarve
- baggrundsbillede
- baggrund-gentag
- baggrundsvedhæftning
- baggrundsposition
Du kan skabe interessante designs med CSS ved hjælp af forskellige baggrundsmønstre. Med disse mønstre kan du opnå unikke og fremragende baggrunde til din hjemmeside.
Andre baggrundsegenskaber i CSS
CSS er kraftfuld, og der er meget, du kan gøre med det for at pifte din applikation op. Du kan bruge egenskaber som baggrundsklip, baggrundsoprindelse og baggrundsblandingstilstand til at tilføje noget animation.
Du kan også bruge gradienter og mønstre til at tilpasse dine sider. Eksperimenter med CSS-baggrundsegenskaber for at skærpe dine webdesignfærdigheder.