With CSS3 DTP työtä monin tavoin on tullut helpompaa ja looginen: onhan voit nyt tehdä joustavasti määrittää objektin, harvemmin turvaudutaan JavaScript.Sanotaan sinun täytyy säätää läpinäkyvyyttä tausta - CSS heti tarjoaa useita vaihtoehtoja.
tausta määritelty joukko ominaisuuksia (tausta-kuva, tausta-asema, tausta-koko, tausta-toista, tausta-kiinnitys, tausta-alkuperä, tausta-clip, tausta-väri), joista kukin voidaan määrätä yksin taiyhdistää saman määritteen tausta.Olkaamme tutkia jokainen näistä tarkemmin.
attribute tausta-väri
CSS, taustaväri voidaan asettaa useilla tavoilla: käyttäen heksadesimaalikoodia, värin nimi tai RGB-merkintä.CSS3 tuli mahdolliseksi käyttää sijasta RGB-tallennus vaihtoehto RGBA.
hex värikoodi on kirjoitettu omaisuutta jälkeen ristikko: background-color: # FFDAB9.Jos merkit pareittain vastaavat tällaista kirjaa, koodi on yleensä pieni leikkaus: # ccff00 voidaan kirjoittaa # CF0:
body {background-color: # CF0;}.
nimi siellä, jopa kaikkein eksoottisia värejä.Esimerkiksi lisäksi standardin punainen ja valkoinen, voit käyttää NavajoWhite (#FFDEAD) tai Honeydew2 (# E0EEE0):
body {background-color: purple;}.
viimeinen vaihtoehto RGB tai RGBA ennätys voit määrittää paitsi väri, mutta myös avoimuutta tausta CSS, mutta tapa työskennellä IE 9 vain vanhempia versioita.Muut selaimet tunnistaa normaali variantti avoimuutta.Mukaan W3C-standardeja on edullista käyttää kaikkia samoja RGBA sijaan enemmän tavallista RGB.
viime arvo RGBA asettaa peittävyyttä taustan ja 0 (läpinäkyvä) ja 1 (läpinäkymätön).
On joitakin epätavallisia arvoja.Taustaväri voidaan määrittää käyttämällä HSL ja HSLA.Molemmat lisättiin CSS3, ja siksi ei ole tuettu IE versio 9 tai uudempi.Vaihtoehdot ovat samat RGB tai RGBA, vain eri muodossa: Hue (värisävy - arvo väriympyrässä, annetaan asteina), Kyllästä (kylläisyys - värin voimakkuus prosentteina, 0-100), keveys (keveys - kirkkaus, mitattiin vastaavasti parametrin Kyllästä).
attribute tausta-kuva
eniten rajat selaimen versio läpinäkyvä tausta - on käyttää kuvan.CSS3, voit määrittää jopa enemmän kuvia, tämä tapahtuu pilkku.Esimerkki:
body {background-image: url (bg1.png), url (bg2.png)}.
tukee tätä jopa IE8.Useita kuvia kuin tausta käytetään ulkoasu kumi.Tärkeää on, älä unohda käyttää mitä tahansa kuvaa asetettu CSS taustaväri, koska käyttäjät voivat yksinkertaisesti ladata kuvan.
attribute tausta-asema
Jos käytät kuvan määritellä tausta block, CSS voit sijoittaa kuvan missä tahansa ruudulla.Oletuksena kuva sijaitsee vasemmassa yläkulmassa.Attribuutti hyväksyä mitään sanallista suuntiin (ylös, alas, vasemmalle, oikealle) tai numeerinen (korot, pikseliä ja muiden yksiköiden).On tarpeen määritellä kaksi arvot vaaka- ja pystysuunnassa:
body {background-position: oikea keskelle;} - tässä esimerkissä, tausta tulee sijaitsemaan oikealla puolella sivun, jossa ylä- ja alareunassa etäisyys kuvan ovat samat.
attribute tausta-size
Joskus sinun täytyy käyttää CSS venyttää tausta tai pienentää sen kokoa.Tätä tarkoitusta varten, attribuutti tausta-koon, ja koko voidaan määritellä tausta pikseliä tai prosenttiosuuden, tai mikä tahansa muu mittayksikkö.
Kun tämän ominaisuuden, on olemassa joitakin ongelmia: oikea näyttö tausta vanhemmilla selaimilla sinun täytyy käyttää etuliitettä.Tietenkin, nykyiset versiot tukevat täysin tätä ominaisuutta ja tarvitaan erityisiä ominaisuuksia katosi.
attribute tausta-liitetiedoston
Tämä ominaisuus määrittää käyttäytymistä taustakuvan selattaessa.Esimerkiksi, se voi kestää 3 arvot (lukuun ottamatta perintönä, sillä yhteensä kaikki ominaisuudet tässä artikkelissa):
- kiinteät - tekee kuvan taustalla kiinteiden;
- selaa - tausta rullaa kanssa loput elementit;
- paikallinen - kuva taustalla pyörähtää jos vieritys on sisältöä.Tausta, joka ylittää ole vahvistettu.
Esimerkki käytöstä:
body {background-attachment kiinteä}.
hetkellä, Firefox ei tue uusinta omaisuus (paikallinen).
attribuutti tausta-alkuperää
Tämä ominaisuus vastaa asemointia elementin.Selaimet aiemmat versiot vaativat etuliitteitä.Ominaisuus itsessään on kolme parametrit:
- padding-box kantoja reunasta taustalla, ottaen huomioon paksuus runko;
- raja-laatikko ominaisuuksia, jotka poikkeavat edellisestä, että rajaviiva voi olla kokonaan tai osittain peittää taustan;
- content-box paikannus kuvan pryavyazyvaya sen sisällöstä.
Jos määrittelet useita arvoja, selain voi reagoida omalla tavallaan: Firefox ja Opera vain hyväksyä ensimmäinen vaihtoehto.
attribute tausta-toista
Pääsääntöisesti jos taustakuvan on määritetty, se on toistettava vaaka- tai pystysuoraan.Tästä ja käytetty määrite tausta-toista.Näin ollen kenttää tausta, CSS, josta tämä ominaisuus voi olla yksi monista vaihtoehdoista:
- no-toistaa - kuva näkyy sivulla yhdessä muodossa;
- toista - kuvio toistuu x ja y;
- toista-x - vain vaakasuoraan;
- toista-y - vain pystysuunnassa;
- tilaa - kuvio toistuu, mutta jos tilaa on täytetty, sitten on tyhjiä tiloja kuvien välillä;
- ympäri - kuva skaalataan, jos se ei täytä koko alueen koko kuva.
Esimerkki ominaisuus:
body {background-repeat: no-toistaa toista} - samoin background-repeat: repeat-y.
CSS3 voi määrittää arvot useita kuvia, jos siirto parametrit pilkuilla erotettuna.
attribuutti tausta-piirros
Tämä attribuutti määrittää käyttäytymisen tausta-rajapintoihin (esimerkiksi, kun kyseessä on pilkullinen kehysten):
- täyte-box - tausta näkyy sisätilojen lohkon;
- raja-box - kuuluu soveltamisalaan kuvan;
- content-box - kuvan taustalla näkyy ainoastaan sisällöstä.
Esimerkki käytöstä:
body {background-clip: sisältö-box;}.
Chrom Safari edellyttävät etuliite -webkit-.
opasiteetti ominaisuus ja suodattaa
peittävyyttä ominaisuuden avulla voit asettaa taustan läpinäkyvyys - CSS omaisuus toimi kaikissa selaimissa.Arvo on säädettävissä 0,0-1,0 osallistavaa.Tällä voit asettaa avoimuutta tausta CSS ilman kokonaisluku arvo sijasta 0,3 riittää kirjoittaa 0,3:
.block {background-image: url (img.png);peittävyyttä: 0,3;}.
Voit asettaa taustan läpinäkyvyys, CSS sopii myös IE alle yhdeksäs versio, käytä määritettä suodatin:
.block {background-image: url (img.png);suodatin: alpha (opasiteetti = 30);}.
Tällöin opasiteetti on välillä 0 ja 100. Huomaa, että peittävyyden niille eri avoimuutta asetuksia kautta RGBA perinnöllisyys: peittävyyttä käyttämällä läpinäkyvä tausta on paitsi, vaan myös kaikki tuotteet sisällä.
Varmista aina selaimen käyttötiedot IVY ja kaikissa muissa maissa.Suurin ongelma kaikkien DTP - vanhemmat versiot IE, he eivät salli täysin hyödyntää CSS3.Jos asettelu älä unohda käyttää erityispalveluja että onko selaimessasi on ominaisuus CSS.Jos et voi asentaa vanhempia versioita selaimista, saat palvelua, joka tarkistaa sivuston toimintaa eri selaimissa verkossa.
