Saatat ajatella taustasuunnittelun olevan yksinkertaista, mutta CSS: llä on monia hämäriä ja tehokkaita ominaisuuksia, joita voit oppia.

Verkkosivustosi taustateema voi vaikuttaa merkittävästi sen ulkoasuun ja tuntumaan. Värit, kuvat ja taustakuviot herättävät tunteita ja luovat loistavia käyttökokemuksia.

CSS-taustaominaisuuksien avulla voit määrittää HTML-elementtien taustatyylin. Opi kaikki joistakin CSS-ominaisuuksista, joiden avulla voit luoda erinomaisia ​​taustoja.

1. taustaväri

The taustaväriominaisuus määrittää elementin taustan värin. Voit asettaa värin käyttämällä nimeä, kuten "punainen", HEX-arvoa, kuten "#00FF00" tai RGB-arvoa, kuten "rgb (0, 255, 0)". Voit myös käyttää HSL-arvoa taustavärin asettamiseen käyttämällä sävyä, kylläisyyttä ja vaaleutta.

Seuraava esimerkki asettaa koko sivun taustavärin oranssiksi. Jokainen otsikkoelementti saa oman taustansa.

<kehon>
<h2>Olen Vihreäh2>
<h3>Olen Punainenh3>
<h4>Olen sininenh4>
kehon>

CSS: n avulla voit lisätä jokaiseen elementtiin ainutlaatuisen taustavärin:

instagram viewer 
kehon {
taustaväri: oranssi;
}
h2 {
taustaväri: #006600;
}


h3 {
taustaväri: rgb(128, 0, 0);
}
h4{
taustaväri: hsl(240, 100%, 50%);
}

Tämä muotoilee sivun tältä:

Opacity-ominaisuuden avulla voit määrittää elementin läpinäkyvyyden. Opasiteetti saa arvot välillä 0,0 - 1,0. Mitä pienempi arvo, sitä läpinäkyvämpi elementti on.

Kokeile esimerkiksi asettaa runkoelementin peittävyydeksi 0,5:

kehon {
taustaväri:oranssi;
opasiteetti:0.5;
}

Tämä näkyy seuraavasti – vertaa värejä edellisen kuvakaappauksen väreihin:

2. taustakuva

background-image-ominaisuus asettaa kuvan elementin taustaksi. Voit viitata paikalliseen tai Internetistä peräisin olevaan kuvaan.

<kehon>
 <h1>Heisiellä!h1>
 <s>minäomistaaankuvasisäänminuntausta!s>
kehon>

CSS-tiedosto:

kehon {
taustakuva:url("https://kuvia.pexels.com/Valokuvat/1191710/pexels-valokuva-1191710.jpeg?auto=puristaa&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Tämä näkyy näin:

Voit myös käyttää tausta kaltevuudet luodaksesi sovelluksellesi ainutlaatuisen ilmeen.

3. taustatoisto

Taustakuva-ominaisuus toistaa kuvat oletuksena. Voit valita, toistetaanko kuva vaakasuunnassa x-akselilla tai pystysuunnassa y-akselilla.

Vaihtoehtoisesti, jos toisto ei sovi tyyliisi, voit poistaa sen käyttämällä arvoa ei-toistoa.

<kehon>
<h1>Hei siellä!h1>
<h3>Esittelen toista tausta-toistoominaisuutta x-akselilla!h3>
kehon>

Käytä seuraavaa CSS: ää lisätäksesi toistuvan taustan x-akselilla:

kehon {
taustakuva: url("https://kuvia.pexels.com/Valokuvat/459335/pexels-valokuva-459335.jpeg?auto=puristaa&cs=tinysrgb&w=1260&h=750&dpr=1");
taustatoisto: toista-x;
}

Lopputulos:

Yritä seuraavaksi toistaa kuva y-akselilla:

kehon {
taustakuva:url("https://cdn.pixabay.com/kuva/2016/04/18/22/05/simpukankuoret-1337565__340.jpg");
taustatoisto:repeat-y;
}

Lopputulos:

Y-akselin esimerkki näyttää varmasti vääristyneeltä. Jos nämä eivät ole etsimiäsi malleja, voit määrittää ei-toistoa sen sijaan:

kehon {
taustakuva:url("https://kuvia.pexels.com/Valokuvat/259915/pexels-valokuva-259915.jpeg?auto=puristaa&cs=tinysrgb&w=600");
taustatoisto:ei toistoa;
}

Lopputulos:

4. tausta-asento

Ominaisuus background-position määrittää taustakuvan sijainnin elementissään. Se käyttää paikkakohtaisia ​​avainsanoja, kuten keskusta, alkuun, ja pohjatai pikseli- tai prosenttiarvo.

Lisää taustan sijaintiominaisuus viimeiseen kuvaan:

kehon {
taustakuva: url("https://kuvia.pexels.com/Valokuvat/259915/pexels-valokuva-259915.jpeg?auto=puristaa&cs=tinysrgb&w=600");
tausta-asento: alkuunkeskusta;
}

Se näyttää tältä:

Voit nähdä kuvan vääristävän sivuston ulkoasua. Korjataan se seuraavalla omaisuudella.

5. taustan kokoinen

Voit käyttää taustakuvaominaisuutta määrittääksesi kuvalle tietyn koon. Se käyttää avainsanoja, kuten peite ja sisältää tai pikseli- tai prosenttiarvo. Korjataan vääristynyt taustakuva lisäämällä taustan kokoominaisuus.

body {
 taustakuva: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 taustatoisto: ei toistoa;
 tausta-asento: keskellä;

Tulos osoittaa, että kuva peittää nyt verkkosivun suhteellisesti.

6. tausta-liite

Ominaisuus background-attachment määrittää, pysyykö taustakuvan paikka kiinteänä vai rullaako se. Voit käyttää avainsanoja kiinteä tai vierittää.

Osoitetaan se seuraavassa koodissa:

<kehon>
<h1>Taustaliitteen ominaisuush1>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
<s>Kiinteän liitteen ominaisuuden avulla huomaat, että tausta ei liiku tekstin mukana.s>
kehon>

CSS-tiedosto:

kehon {
taustakuva: url("https://kuvia.pexels.com/Valokuvat/96627/pexels-valokuva-96627.jpeg?auto=puristaa&cs=tinysrgb&w=600");
taustatoisto: ei-toistoa;
tausta-asento: keskusta;
taustan kokoinen: peite;
tausta-liite: korjattu;
}

Jos siirrät sivua alaspäin, huomaat, että tausta ei liiku:

Voit esitellä vierityksen taustaliitteen ominaisuuden muuttamalla avainsanaksi rullaa. Huomaat, että nyt tausta liikkuu tekstin mukana.

kehon {
taustakuva: url("https://kuvia.pexels.com/Valokuvat/96627/pexels-valokuva-96627.jpeg?auto=puristaa&cs=tinysrgb&w=600");
taustatoisto: ei-toistoa;
tausta-asento: keskusta;
taustan kokoinen: peite;
tausta-liite: rullaa;
}

7. Taustan pikakirjoitusominaisuus

Saatat huomata, että sinun on sisällytettävä useita ominaisuuksia saadaksesi täydellisen taustan. Tämä edellyttää paljon koodin kirjoittamista. Mutta voit lyhentää koodia käyttämällä taustatekstiominaisuutta.

Pikakirjoitusominaisuuden avulla voit asettaa useita taustaominaisuuksia yhdelle riville. Käytät avainsanaa tausta asettaaksesi pikakirjoituksen ominaisuuden.

Esimerkiksi tämän koodin kirjoittamisen sijaan:

kehon {
taustaväri: vihreä;
taustakuva: url("kannettava tietokone 3.jpg");
taustatoisto: ei-toistoa;
taustan kokoinen: peite;
tausta-liite: rullaa;
tausta-asento: keskusta;
}

Voit kirjoittaa sen yhdelle riville seuraavasti:

kehon {
tausta: vihreäurl("kannettava tietokone 3.jpg") ei-toistoapeiterullaakeskusta;
}

Pikakirjoitusominaisuus noudattaa tiettyä järjestystä. Sinun on tasattava ominaisuudet tässä järjestyksessä, vaikka yksi tai useampi puuttuisi. Järjestys on:

  • taustaväri
  • taustakuva
  • taustatoisto
  • tausta-liite
  • tausta-asento

Voit luoda mielenkiintoisia malleja CSS: llä käyttämällä erilaisia taustakuvioita. Näillä kuvioilla voit saavuttaa verkkosivustollesi ainutlaatuisen ja erinomaisen taustan.

Muut CSS: n taustaominaisuudet

CSS on tehokas ja voit tehdä sillä paljon piristääksesi sovellustasi. Voit lisätä animaatioita käyttämällä ominaisuuksia, kuten background-clip, background-origin ja background-blend-mode.

Voit myös muokata sivujasi liukuvärien ja kuvioiden avulla. Kokeile CSS-taustaominaisuuksia parantaaksesi web-suunnittelutaitojasi.