CSS-tausta vs taustaväri

CSS tarjoaa erilaisia ominaisuuksia HTML-elementtien tyyliin. Näitä ominaisuuksia käytetään eri tarkoituksiin, kuten taustakuvan ja värin lisäämiseen sekä HTML-elementtien leveyden ja korkeuden asettamiseen. Näitä ominaisuuksia ovat marginaali, väri, leveys, korkeus, tausta, taustaväri ja monet muut. Tarkemmin sanottuna tausta- ja taustaväri-ominaisuutta käytetään asettamaan HTML-elementtien tausta.

Tässä oppaassa opimme yksityiskohtaisesti eron taustan ja taustavärin ominaisuuksien välillä.

Aloitetaan!

CSS-taustaominaisuus

Jos haluat säätää minkä tahansa HTML-elementin taustaa, CSS ' tausta ”kiinteistö on käytössä. Se on lyhennelmä ominaisuus kahdeksasta muusta ominaisuudesta, mikä tarkoittaa, että voit käyttää niitä kaikkia yhdellä rivillä. Nämä muut ominaisuudet ovat:

taustaväri
taustakuva
tausta-asento
taustan kokoinen
taustatoisto
tausta-alkuperä
taustaleike
tausta-liite

Syntaksi

Tässä on taustaominaisuuden syntaksi:

tausta: värikuvan sijainti/koko toista alkuperää oleva leikkeen liite

Siirrytään yksitellen kaikkien edellä mainittujen ominaisuuksien selittämiseen.

CSS-taustaväriominaisuus

Käyttämällä ' taustaväri ”-ominaisuutta, voit asettaa taustan värin. Väri näkyy HTML-elementtien takana.

Syntaksi

Taustaväri-ominaisuuden syntaksi on:

taustaväri : väri-

'' väri- ”, voit määrittää taustan värin, jonka haluat näkyvän elementtien takana.

Esimerkki

Ensin HTML-tiedostoon luomme säilön

-tunnisteen avulla ja lisäämme sitten otsikon ja kappaleen.

HTML

< div >

< h1 > LinuxHint < / h1 >

< s > Tervetuloa sivuillemme < / s >

< / div >

CSS:ssä säädämme div:n korkeutta muodossa ' 100 % ' jotta se näkyy koko sivulla ja tekstin fonttikoon mukaan ' xx iso ”. Aseta sen jälkeen taustaväriksi ' aqua ”.

CSS

div {

korkeus : 100 % ;

Fonttikoko : xx iso ;

taustaväri : aqua ;

}

Alla olevassa kuvassa voit nähdä, että taustaväriä on käytetty:

CSS-taustakuva-ominaisuus

' taustakuva ” -ominaisuutta käytetään asettamaan yksi tai useampi kuva HTML-elementtien taustaksi. Tämän ominaisuuden avulla voit lisätä erilaisia taustakuvia eri elementeille.

Syntaksi

Taustakuva-ominaisuuden syntaksi on:

taustakuva: url()

Anna tässä sen kuvan polku, jonka haluat asettaa taustaksi argumentiksi ' url() ”.

Esimerkki

Jatkoa edelliselle esimerkille lisää taustakuva ' div ”luokka. Lisäämme kuvan URL-osoitteen muodossa ' url(img.jpg) ':

div {

...

taustakuva : url ( img.jpg ) ;

}

Alla oleva tulos osoittaa, että taustakuva on lisätty onnistuneesti:

Huomaa, että kuva toistuu. Voit ratkaista tämän ongelman tutustumalla seuraavaan omaisuuteen.

CSS-taustatoiston ominaisuus

Kun lisäät kuvan verkkosivun taustaksi, se toistetaan oletuksena. Välttääksesi tämän toiston ja asettaaksesi kuvion valintasi mukaan, ' taustatoisto ”kiinteistö on käytössä.

Syntaksi

Taustatoisto-ominaisuuden syntaksi on:

taustatoisto : toistaa | toista-x | toista-y | ei-toistoa

Taustatoisto-ominaisuuden ilmoitettujen arvojen kuvaus on annettu alla:

toistaa: Sitä käytetään kuvan toistamiseen molempiin suuntiin, pysty- ja vaakasuunnassa.
toista-x: Sitä käytetään kuvan toiston asettamiseen vain vaakasuunnassa.
toista-y: Se määrittää kuvan pystysuoran toiston.
ei toista: Sitä käytetään estämään kuvan toisto.

Esimerkki

Tässä asetamme taustatoisto-ominaisuuden arvoksi ' ei-toistoa ':

div {

...

taustatoisto : ei-toistoa ;

}

Yllä olevan koodin tulos on esitetty alla. Voit nähdä, että kuva ei toistu enää:

CSS-taustapaikan ominaisuus

Voit asettaa taustakuvan sijainnin ' tausta-asento ”kiinteistö on käytössä. Sen avulla voit säätää kuvaa eri asentoihin, kuten vasempaan yläreunaan, vasempaan keskelle, vasempaan alaosaan, oikeaan yläosaan, oikeaan keskelle ja moniin muihin.

Syntaksi

Tausta-sijaintiominaisuuden syntaksi on:

tausta-asento : arvo

'' arvo ”, voit määrittää kuvan sijainnin.

Esimerkki

Tässä asetamme taustan sijainniksi ' keskusta ':

div {

...

tausta-asento : keskusta ;

}

Alla olevassa tulosteessa kuva näkyy sivun keskellä:

CSS-taustakokoinen ominaisuus

Voit määrittää taustakuvan koon ' taustan kokoinen ”kiinteistö on käytössä.

Syntaksi

Taustakoolla on seuraava syntaksi:

taustan kokoinen : pituus|kansi

Seuraavassa on kuvaus taustan kokoominaisuuden arvoista:

pituus: Sitä käytetään taustakuvan leveyden ja korkeuden vahvistamiseen.
peite: Sitä käytetään säätämään taustakuvaa koko taustalla.

Esimerkki

Asetamme taustan kooksi ' 100 % ' korkeus ja ' 80 % 'leveys:

div {

...

taustan kokoinen : 100 % 80 % ;

}

Voit nähdä, että kuvan kokoa on muutettu määritettyjen mittojen perusteella:

CSS-taustaalkuperäinen omaisuus

' tausta-alkuperä ” -ominaisuutta käytetään säätämään taustakuvan sijaintialuetta. Kuvaa säädetään oletusarvoisesti vasemmassa yläkulmassa.

Syntaksi

Taustalähteen ominaisuuden syntaksi on:

tausta-alkuperä : pehmustelaatikko| raja-laatikko | sisältölaatikko

Taustaalkuperä-ominaisuuden arvot on kuvattu alla:

pehmustelaatikko: Se on background-origin -ominaisuuden oletusarvo, jota käytetään säätämään taustakuvan sijaintia täytereunan mukaan.
border-box: Sitä käytetään kuvan asettamiseen kuvan reunaruudun mukaan.
sisältölaatikko: Sitä käytetään taustakuvan asettamiseen kuvan sisällön mukaisesti.

merkintä: Back-origin-ominaisuus ei toimi, jos taustaliitteen ominaisuuden arvoksi on asetettu ' korjattu ”.

Esimerkki

Luo ensin reunus säilön ympärille. Tässä jatkamme edellistä esimerkkiä ja asetamme täytearvoksi ' 10px ”. Säädä sen jälkeen reunuksen leveyttä muodossa ' 15 kuvapistettä ', tyylinä ' harjanne ' ja värinä ' rgb(1, 68, 68) ”. Lopulta annamme tausta-alkuperäomaisuuden arvoksi ' sisältölaatikko ':

div {

...

pehmuste : 10px ;

rajaa : 15 kuvapistettä harjanne rgb ( 1 , 68 , 68 ) ;

tausta-alkuperä : sisältölaatikko ;

}

Yllä annetun koodin tulos esitetään alla. Voit nähdä, että kuvan sijainti on asetettu div-osan sisällön mukaan:

CSS-taustaleikkeen ominaisuus

' taustaleike ”-ominaisuus toimii elementin taustavärillä. Sen avulla voit hallita, kuinka pitkälle taustaväri ulottuu elementin ulkopuolelle, kuten elementin täyte, sen reunus ja sisältö.

Syntaksi

Taustaleikkeen ominaisuuden syntaksi on:

tausta-alkuperä : raja-laatikko | pehmustelaatikko | sisältölaatikko

Taustaalkuperä-ominaisuuden arvot on kuvattu alla:

border-box: Se on tausta-alkuperä-ominaisuuden oletusarvo, jota käytetään taustavärin asettamiseen reunuksen takana.
pehmustelaatikko: Sitä käytetään värin säätämiseen elementin täytelaatikossa.
sisältölaatikko: Sitä käytetään taustavärin asettamiseen elementin sisällön mukaan.

Esimerkki

Jatkamme edellistä esimerkkiä ja muutamme reunatyylin arvoksi ' pilkullinen ' ymmärtääksesi taustaleikkeen ominaisuuden. Tämän jälkeen asetamme taustaleikkeen ominaisuuden arvoksi ' pehmustelaatikko ':

div {

...

taustaleike : pehmustelaatikko ;

}

Tulos tarkoittaa, että valkoinen taustaväri näkyy, kun reunan reuna päättyy:

CSS-taustaliitteen ominaisuus

' tausta-liite ” -ominaisuutta käytetään säätämään toimintaa tai kuvaa sivua vieritettäessä. Sen käyttäytyminen voidaan asettaa vierimään muiden elementtien kanssa tai kiinteästi.

Syntaksi

Taustaliitteen ominaisuuden syntaksi on:

tausta-liite : arvo

Voit asettaa taustaliitteen arvoksi ' korjattu 'korjaa taustakuva tai ' rullaa ” salliaksesi kuvan vierimisen sivun mukana.

merkintä: Oletuksena taustaliitteen ominaisuuden arvo on ' rullaa ”.

Voidaan nähdä, että lisätty taustakuva ei ole staattinen, kun olemme vierineet. Korjataan nyt tämä ongelma.

Tätä varten asetamme taustaliitteen ominaisuuden arvoksi ' korjattu ':

div {

...

tausta-liite : korjattu ;

}

Tässä tulos, joka osoittaa, että kuva on korjattu:

Siirry nyt taustan ja taustavärin ominaisuuksien vertailuun.