7 CSS-bakgrunnsegenskaper for å livne opp webdesignene dine

Bakgrunnstemaet til nettstedet ditt kan påvirke utseendet og følelsen betydelig. Farger, bilder og bakgrunnsmønstre fremkaller følelser og skaper gode brukeropplevelser.

Du kan bruke CSS-bakgrunnsegenskaper til å angi bakgrunnsstilen til HTML-elementer. Lær alt om noen av CSS-egenskapene du kan bruke til å lage utmerkede bakgrunner.

1. bakgrunnsfarge

De bakgrunnsfarge egenskap angir fargen på bakgrunnen til et element. Du kan angi fargen ved å bruke et navn som "rød", en HEX-verdi som "#00FF00" eller en RGB-verdi - som "rgb (0, 255, 0)". Du kan også bruke en HSL-verdi til å angi bakgrunnsfargen ved å bruke fargetone, metning og lyshet.

Følgende eksempel setter bakgrunnsfargen på hele siden til oransje. Overskriftselementene får hver sin bakgrunn.

<kropp>
<h2>Jeg er grønnh2>
<h3>Jeg er rødh3>
<h4>Jeg er blåh4>
kropp>

Ved å bruke CSS kan du bruke en unik bakgrunnsfarge på hvert element:

kropp {
bakgrunnsfarge: oransje;
}
h2 {
bakgrunnsfarge: #006600;
}
h3 {
bakgrunnsfarge: rgb(128, 0, 0);
}





instagram viewer
h4{
bakgrunnsfarge: hsl(240, 100%, 50%);
}

Dette vil style siden slik at den ser ut:

Du kan bruke egenskapen opacitet til å bestemme gjennomsiktigheten til et element. Opasitet tar verdier mellom 0,0 og 1,0. Jo lavere verdi, jo mer gjennomsiktig er elementet.

For eksempel, prøv å sette opasiteten til et kroppselement til 0,5:

kropp {
bakgrunnsfarge:oransje;
opasitet:0.5;
}

Dette vil vises som følger—sammenlign fargene med de i forrige skjermbilde:

2. bakgrunnsbilde

Bakgrunnsbilde-egenskapen setter et bilde som bakgrunn for et element. Du kan referere til et lokalt bilde eller et fra internett.

<kropp>
 <h1>Halloder!h1>
 <s>Jeghaanbildeiminbakgrunn!s>
kropp>

CSS-filen:

kropp {
bakgrunnsbilde:url("https://Bilder.pexels.com/bilder/1191710/pexels-foto-1191710.jpeg?auto=komprimere&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Dette vil vises slik:

Du kan også bruke bakgrunnsgradienter for å skape et unikt utseende for applikasjonen din.

3. bakgrunnsgjenta

Bakgrunnsbilde-egenskapen gjentar bilder som standard. Du kan velge å gjenta bildet horisontalt på x-aksen eller vertikalt på y-aksen.

Alternativt, hvis en repetisjon ikke passer stilen din, kan du fjerne den ved å bruke verdien ingen gjentakelse.

<kropp>
<h1>Hei der!h1>
<h3>Jeg demonstrerer gjenta bakgrunn-gjenta-egenskapen på x-aksen!h3>
kropp>

Bruk følgende CSS for å bruke en repeterende bakgrunn langs x-aksen:

kropp {
bakgrunnsbilde: url("https://Bilder.pexels.com/bilder/459335/pexels-foto-459335.jpeg?auto=komprimere&cs=tinysrgb&w=1260&h=750&dpr=1");
bakgrunnsgjenta: gjenta-x;
}

Resultatet:

Prøv deretter å gjenta bildet på y-aksen:

kropp {
bakgrunnsbilde:url("https://cdn.pixabay.com/bilde/2016/04/18/22/05/skjell-1337565__340.jpg");
bakgrunnsgjenta:repeat-y;
}

Resultatet:

Eksemplet på y-aksen ser absolutt forvrengt ut. Hvis dette ikke er mønstrene du ser etter, kan du spesifisere ingen gjentakelse i stedet:

kropp {
bakgrunnsbilde:url("https://Bilder.pexels.com/bilder/259915/pexels-foto-259915.jpeg?auto=komprimere&cs=tinysrgb&w=600");
bakgrunnsgjenta: ingen gjentakelse;
}

Resultatet:

4. bakgrunnsposisjon

Bakgrunnsposisjon-egenskapen definerer posisjonen til bakgrunnsbildet i elementet. Den bruker posisjonsspesifikke søkeord som senter, topp, og bunn, eller en piksel eller prosentverdi.

Legg til en bakgrunnsposisjonsegenskap til det siste bildet:

kropp {
bakgrunnsbilde: url("https://Bilder.pexels.com/bilder/259915/pexels-foto-259915.jpeg?auto=komprimere&cs=tinysrgb&w=600");
bakgrunnsposisjon: toppsenter;
}

Det vil se slik ut:

Du kan se at bildet forvrenger utseendet til nettstedet. La oss fikse det med neste eiendom.

5. bakgrunnsstørrelse

Du kan bruke egenskapen for bakgrunnsbilde til å definere en bestemt størrelse for bildet. Den bruker nøkkelord som dekke og inneholde eller en piksel eller prosentverdi. La oss fikse det forvrengte bakgrunnsbildet ved å legge til en egenskap i bakgrunnsstørrelse.

kropp {
 bakgrunnsbilde: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 bakgrunns-gjenta: ikke-gjenta;
 bakgrunnsposisjon: senter;

Resultatet viser at bildet nå dekker nettsiden proporsjonalt.

6. bakgrunnsvedlegg

Egenskapen for bakgrunnsvedlegg definerer om bakgrunnsbildeposisjonen forblir fast eller ruller. Du kan bruke nøkkelordene fast eller bla.

La oss vise det i følgende kode:

<kropp>
<h1>Egenskapen for bakgrunnsvedleggh1>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
<s>Med den faste vedleggsegenskapen vil du legge merke til at bakgrunnen ikke beveger seg med teksten.s>
kropp>

CSS-filen:

kropp {
bakgrunnsbilde: url("https://Bilder.pexels.com/bilder/96627/pexels-foto-96627.jpeg?auto=komprimere&cs=tinysrgb&w=600");
bakgrunnsgjenta: ingen gjentakelse;
bakgrunnsposisjon: senter;
bakgrunnsstørrelse: dekke;
bakgrunnsvedlegg: fikset;
}

Hvis du beveger deg ned på siden, vil du legge merke til at bakgrunnen ikke beveger seg:

For å demonstrere egenskapen rulle bakgrunnsvedlegg, endre nøkkelordet til bla. Du vil legge merke til at nå beveger bakgrunnen seg med teksten.

kropp {
bakgrunnsbilde: url("https://Bilder.pexels.com/bilder/96627/pexels-foto-96627.jpeg?auto=komprimere&cs=tinysrgb&w=600");
bakgrunnsgjenta: ingen gjentakelse;
bakgrunnsposisjon: senter;
bakgrunnsstørrelse: dekke;
bakgrunnsvedlegg: bla;
}

7. Bakgrunnen stenografi eiendom

Du legger kanskje merke til at du må inkludere flere egenskaper for å få den perfekte bakgrunnen. Dette innebærer å skrive mye kode. Men du kan forkorte koden ved å bruke egenskapen bakgrunnsstenografi.

Stenografi-egenskapen lar deg angi mange bakgrunnsegenskaper på en enkelt linje. Du bruker nøkkelordet bakgrunn for å angi stenografi-egenskapen.

For eksempel, i stedet for å skrive kode som dette:

kropp {
bakgrunnsfarge: grønn;
bakgrunnsbilde: url("bærbar PC3.jpg");
bakgrunnsgjenta: ingen gjentakelse;
bakgrunnsstørrelse: dekke;
bakgrunnsvedlegg: bla;
bakgrunnsposisjon: senter;
}

Du kan skrive det på en enkelt linje, slik:

kropp {
bakgrunn: grønnurl("bærbar PC3.jpg") ingen gjentakelsedekkeblasenter;
}

Stenografiegenskapen følger en bestemt rekkefølge. Du må justere egenskapene i den rekkefølgen selv om en eller flere mangler. Rekkefølgen er:

• bakgrunnsfarge
• bakgrunnsbilde
• bakgrunnsgjenta
• bakgrunnsvedlegg
• bakgrunnsposisjon

Du kan lage interessante design med CSS ved å bruke forskjellige bakgrunnsmønstre. Med disse mønstrene kan du oppnå unike og enestående bakgrunner for nettstedet ditt.

Andre bakgrunnsegenskaper i CSS

CSS er kraftig og det er mye du kan gjøre med det for å krydre applikasjonen din. Du kan bruke egenskaper som bakgrunnsklipp, bakgrunnsopprinnelse og bakgrunnsblandingsmodus for å legge til litt animasjon.

Du kan også bruke gradienter og mønstre for å tilpasse sidene dine. Eksperimenter med CSS-bakgrunnsegenskaper for å skjerpe ferdighetene dine i webdesign.