Kuvaus

Määrittää elementin taustavärin. Vaikka tämä ominaisuus ei peri ylätasonsa ominaisuuksia, koska alkuarvoksi on asetettu läpinäkyvä, alatason elementtien taustaväri vastaa pääelementin taustaväriä.

Syntaksi

taustaväri:<цвет>| läpinäkyvä | periä

Arvot

läpinäkyvä Asettaa taustan läpinäkyväksi. inherit Perii vanhemman arvon.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

SISÄÄN tässä esimerkissä Web-sivun elementtien taustavärin voi määrittää kolmella eri tavalla. Esimerkin tulos näkyy kuvassa. 1.

Riisi. 1. Taustavärin käyttäminen

Objekti malli

document.getElementById("elementID").style.backgroundColor

Selaimet

Internet Explorerin versiot 7.0:aan asti eivät tue periytymisarvoa.

Etsi "html"-otsikko. Sen pitäisi olla asiakirjan yläosassa.

Muista tämän prosessin perussyntaksi. Liukuvärin luomiseksi sinun on tiedettävä kaksi määrää: aloituspiste/kulma ja värivalikoima, jotka haalistuvat toisiinsa. Voit valita useita värejä, jotta ne sulautuvat toisiinsa; Voit myös asettaa siirtymän suunnan tai kulman.

tausta: lineaarinen gradientti (suunta/kulma, väri1, väri2, väri3 ja niin edelleen);

Luo pystysuora kaltevuus. Jos et määritä suuntaa, gradientti siirtyy ylhäältä alas. Voit luoda sellaisen liukuvärin kirjoittamalla seuraavan koodin tunnisteiden väliin :

html (min-korkeus: 100 %;) runko (tausta: -webkit- lineaarinen gradientti (#93B874, #C9DCB9); tausta: -o- lineaarinen gradientti (#93B874, #C9DCB9); tausta: -moz- lineaarinen -gradientti (#93B874 , #C9DCB9 ); tausta : lineaarinen gradientti (#93B874 , #C9DCB9 ); taustaväri: #93B874 ; )

• SISÄÄN eri selaimet Gradienttifunktiot toteutetaan eri tavalla, joten sinun on lisättävä koodista useita versioita.

1. Luo suuntagradientti. Jos et halua liukuvärin kulkevan pystysuunnassa, määritä suunta, johon värit haalistuvat. Voit tehdä tämän kirjoittamalla seuraavan koodin tunnisteiden väliin :

   html (min-korkeus: 100%;) runko (tausta: -webkit- lineaarinen gradientti (vasen, #93B874, #C9DCB9); tausta: -o- lineaarinen gradientti (oikea, #93B874, #C9DCB9); tausta: -moz- lineaarinen gradientti (oikea , #93B874 , #C9DCB9 ); tausta : lineaarinen gradientti (oikealle , #93B874 , #C9DCB9 ); taustaväri : #93B874 ; )

   • Jos haluat, järjestä sanat "vasen" ja "oikea" uudelleen kokeillaksesi erilaisia ​​kaltevuussuuntia.

2. Käytä muita ominaisuuksia mukauttaaksesi liukuväriä. Voit tehdä sillä enemmän kuin uskotkaan.

   • Esimerkiksi jokaisen värin jälkeen voit syöttää prosenttiluvun. Tämä osoittaa, kuinka paljon tilaa kukin värisegmentti vie. Tässä on esimerkkikoodi näillä parametreilla:

     tausta : lineaarinen gradientti (#93B874 10%, #C9DCB9 70%, #000000 90%);

   • Lisää väriin läpinäkyvyyttä. Tässä tapauksessa se haalistuu vähitellen. Käytä samaa väriä häivyttävän vaikutuksen saavuttamiseksi. Värin asettamiseksi tarvitset rgba()-funktion. Viimeinen arvo määrittää läpinäkyvyyden: 0 on läpinäkymätön väri ja 1 on läpinäkyvä väri.

     tausta : lineaarinen gradientti (oikealle , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));

Tarkista koodi. Koodi värigradientin luomiseksi verkkosivun taustaksi näyttäisi tältä:

< html > < head > < style >html (min-korkeus: 100%;) runko (tausta: -webkit- lineaarinen gradientti (vasen, #93B874, #C9DCB9); tausta: -o- lineaarinen gradientti (oikea, #93B874, #C9DCB9); tausta: -moz- lineaarinen gradientti (oikea , #93B874 , #C9DCB9 ); tausta : lineaarinen gradientti (oikealle , #93B874 , #C9DCB9 ); taustaväri : #93B874 ; ) < body >

Gradienttitäyttötuki CSS:n avulla otettiin käyttöön noin kaksi vuotta sitten Webkit-moottoriin perustuvissa selaimissa (Google Chrome ja Safari), mutta muut eivät tuolloin tukeneet tätä ominaisuutta, joten gradientit tehtiin kuvien avulla. Nyt tämä virhe on korjattu, Firefox 3.6+ tukee täysin objektien gradienttitäyttöä, voit yrittää luopua kuvista mahdollisuuksien mukaan.

Edellisessä artikkelissa ei ollut sanaakaan gradienttitäytteestä - tänään korjaamme tämän puutteen ja puhumme siitä. Lisäksi aihe on erittäin hyvä.

Yleensä kaikki nykyaikaiset selaimet, mukaan lukien IE9, tukevat varjostusta. Myyjän etuliitteitä käytetään, koska eritelmää ei ole vielä hyväksytty virallisesti. Täydellinen opas Voit lukea gradienteista CSS3:ssa css3 gradientit purettu perusteellisesti.

Tässä artikkelissa puhumme hieman selaimista ja niiden liukuvärien ominaisuuksista:

Gradientit webkit-selaimissa

Ominaisuuden syntaksi on melko yksinkertainen - ensimmäinen arvo on täyttötyyppi, toinen ja kolmas ovat alku- ja loppupisteet, vastaavasti, neljäs ja viides ovat aloitus- ja loppuvärit.

Firefox 3.6+

Liukuvärien käyttäminen Firefoxissa

Tässä käytetään hieman erilaista syntaksia, täyttötyyppi ilmoitetaan ominaisuuden nimessä, on vain liukuvärin alun sijainti ja vastaavasti täytön alun ja lopun väri.

Internet Explorer

Tämä selain on pitkään ja ansaitusti nauttinut ulkoasun suunnittelijoiden "rakkaudesta" sen äärimmäisen omaperäisen käyttäytymisen vuoksi. Joten tässä tapauksessa käytetään suodatinta, jonka tekstiä lukee vain IE-selain. Kulma- ja säteittäisiä täyttöjä ei tueta tässä, vain vaaka- tai pystysuorassa kahdella arvolla - startColorstr Ja endColorstr. Tämä on otettava huomioon työskennellessään, muuten tulos IE:ssä näyttää erittäin surulliselta, ja tämän selaimen prosenttiosuus on edelleen melko suuri.

Mitä tarvitaan tämän ominaisuuden yhteensopivuuden varmistamiseksi objektin selaimissa? Lisää neljä koodiriviä sen ominaisuuksiin:

Tausta: #999; /* selaimille, joissa ei ole css3:a */ suodatin: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); /* IE:lle */ tausta: -webkit-gradient(lineaarinen, vasen ylhäällä, vasen alaosa, alkaen(#cc), to(#000)); /* webkitille */ tausta: -moz-linear-gradient(top, #ccc, #000); /* Firefox 3.6+ */

Ylärivi lisättiin erityisesti selaimen omistajille, eivät tue tätä omaisuutta, jotta vältytään väärinkäsityksiltä näytön kanssa, tällaisissa tapauksissa lohko täytetään yhdellä värillä. Pieni huomautus - jos tekstiä sijoitetaan lohkoon, sinun on mietittävä sen väriä yhdistettynä sekä liukuväriin että yksiväriseen täyttöön normaalin luettavuuden varmistamiseksi. Älä unohda tätä.
Tämän seurauksena kaikissa yleisissä selaimissa kuvan pitäisi olla oikea ja näyttää suunnilleen tältä:

Ja vielä yksi asia - muista, että kaikki selaimet eivät voi toimia oikein tämän ominaisuuden kanssa, niiden prosenttiosuus on liian pieni verrattuna yleiseen taustaan, tämä tulee ottaa huomioon kehitettäessä, äläkä mene liian mukaansa. Joka tapauksessa huolellinen virheenkorjaus auttaa aina.

Johdanto

Jos et vielä tiedä kuinka asentaa taustan verkkosivustolle, sinun on hyödyllistä lukea tämä artikkeli. Siitä opit asettamaan kuvan taustakuvaksi, asettamaan sen näytön parametreja tai yksinkertaisesti täyttämään taustan tietyllä värillä.

CSS auttaa meitä

Kuten ehkä arvasit, asetamme taustan lisäämällä CSS-tyylejä html-objektiin. Universaali taustaominaisuus vastaa elementin taustan näyttämisestä. Jos haluat lisätä taustan johonkin tiettyyn elementtiin, lisää CSS-ominaisuudet sen tunnukseen tai luokkaan. Jos koko sivustolle, niin body-tunnisteeseen tai säilön (kääreen) tunnisteeseen (luokkaan), jos se on päällekkäinen rungon kanssa. Tämän artikkelin esimerkeissä työskentelemme runkoelementin kanssa.

Täyttöväri

Aloitetaan yksinkertaisimmasta - täyttämisestä tietyllä värillä. Tätä varten meidän tarvitsee vain tietää värikoodi ja CSS-ominaisuus taustaväri.

Runko ( taustaväri: #000; /* Täytä tausta mustalla */ )

Tämä koodi asettaa sivustollesi tasaisen mustan taustan. Mikä tahansa muu väri voidaan valita taustaväriksi muuttamalla sen koodia.

Jos käytät taustatäyttöä tietty elementti, esimerkiksi otsikon (h1-h6), kappaleen (p) jne. kohdalla, varmista sitten, että tekstin väri ei sulaudu taustalle eikä menetä luettavuutta. Käyttää värin ominaisuus muuttaaksesi tekstin väriä.

P ( taustaväri: #000; /* Täytä tausta mustalla */ väri: #fff; /* Valkoinen teksti mustalle taustalle */ )

Taustakuva

Elementin taustakuva asetetaan background-image-ominaisuuden avulla, joka käyttää polkua kohteeseen graafinen tiedosto. Tiedoston polku määritetään käyttämällä url( ), Missä Tämä on polku grafiikkatiedostoon. Jos yksinkertaisesti määrität tiedoston nimen, esimerkiksi url(background.png), niin tässä tapauksessa kuva tulee tallentaa samaan kansioon kuin css-tiedosto.

On suositeltavaa luoda erillinen kansio kaikille kuville ja määrittää tiedoston absoluuttinen polku, ts. juurikansiosta. Tämä parantaa sivustosi rakennetta ja poistaa ongelmia, jos päätät muuttaa itse CSS-tiedoston sijaintia.

Teksti ( background-image: url(/images/background.png); /* Absoluuttinen polku taustakuvaan background.png */ )

Jos taustakuvaa käytetään, on suositeltavaa määrittää samanaikaisesti väritäyttö (taustaväri-ominaisuuden kanssa). Tässä tapauksessa, jos kuva ei lataudu (kuva ei jostain syystä ole käytettävissä; käyttäjä on poistanut kuvien näyttämisen käytöstä) tai latautuu viiveellä (kuva latautuu kokonaan sivua myöhemmin), taustatäyttö näytetään kuvan sijasta tai kunnes se latautuu kokonaan .

Body ( background-image: url(/images/background.png); /* Absoluuttinen polku taustakuvaan background.png */ background-color: #ab11cf; /* Täytä tausta tietyllä värillä */ )

Nämä kaksi yllä olevan esimerkin ominaisuutta voidaan yhdistää yhdeksi käyttämällä yleistä taustaominaisuutta.

Teksti ( tausta: #ab11cf url(/images/background.png); /* Täyttöväri ja taustakuvan polku */ )

taustaominaisuus

Yleisen taustaominaisuuden avulla voit asettaa kaikki taustakuvan näyttöasetukset yhdelle riville. Katsotaanpa käytettävissä olevia vaihtoehtoja.

Tausta: | periä

Arvojen järjestys voi olla mielivaltainen, ja jos ominaisuutta ei ole määritetty, käytetään oletusarvoa.

tausta-liite

Tämä ominaisuus määrittää, rullaako taustakuva elementin sisällön mukana. Jos haluat korjata kuvan, käytä arvoa kiinteä. Tässä tapauksessa kuva pysyy liikkumattomana sivun sisältöä vieritettäessä. Jos haluat kuvan liikkuvan sivuston sisällön mukana, käytä vieritysarvoa. Oletuksena se on asetettu vierimään.

Body ( background-image: url(/images/background.png); /* Absoluuttinen polku taustakuvaan background.png */ background-attachment: kiinteä; /* Kuva korjattu */ taustaväri: #ab11cf; /* Täytä tausta tietyllä värillä */ )

Vastaava:

Runko ( tausta: #ab11cf url(/images/background.png) korjattu; /* Täyttöväri ja polku kiinteään taustakuvaan */ )

tausta-asento

Jos taustakuva on määritetty, niin tämä omaisuus määrittää alkuperäisen asemansa. Siinä on kaksi välilyönnillä erotettua arvoa: vaaka-asento ja pystyasento. Arvot voidaan asettaa käyttämällä avainsanoja: vasen oikea ylhäällä alhaalla keskellä. Järjestyksellä, jossa ne näkyvät, ei ole merkitystä. Jos arvot on määritetty prosentteina, pikseleinä jne., ensin näytetään vaaka-arvo ja sitten pystysuora arvo. Oletusarvoisesti sijainti on asetettu vasempaan yläkulmaan (vasen yläkulma).

taustatoisto

Määrittää, kuinka taustakuva toistetaan. Se voidaan toistaa vain vaakasuunnassa (toista-x) tai vain pystysuunnassa (repeat-y) tai samanaikaisesti vaaka- ja pystysuunnassa (toisto) tai ilman toistoja ollenkaan (ei toistoa). Oletusarvo on toista.

periä

Käytetään osoittamaan eksplisiittisesti ominaisuuksien periytymistä pääelementistä.