CSS tausta läpinäkyvyys. Läpinäkyvä tausta tai tekstiä CSS

Kynnyksellä CSS3 web-suunnittelijat työskentelevät monin tavoin on tullut helpompaa ja looginen: onhan voit nyt todella joustavasti muokata mitä tahansa esinettä, harvemmin turvautuvat JavaScript. Sanotaan sinun täytyy säätää läpinäkyvyyttä taustan - CSS heti tarjoaa useita vaihtoehtoja.

Tausta määritelty joukko attribuutteja (tausta-kuva, tausta-asemassa , tausta-koko, tausta-toista, tausta-attachment, tausta-alkuperää, tausta-clip, tausta-väri), joista kukin voidaan määrittää erikseen tai yhdessä alla attribuutti tausta. Tarkastellaan kukin niistä yksityiskohtaisesti.

Attribute background-color

CSS, taustaväri voidaan asettaa monella tavalla: käyttämällä heksakoodina, värin nimi tai RGB-tulo. CSS3 tuli mahdolliseksi käyttää sijaan RGB-tallennus vaihtoehto RGBA.

Hex värikoodi kirjataan kiinteistön jälkeen ristikko: background-color: # FFDAB9. Jos merkkiä tässä merkintä ovat samat parit, koodi on yleensä pieni leikkaus: # ccff00 voidaan kirjoittaa # cf0:

body {background-color: # cf0 ;}.

Nimi on jopa eksoottisin värejä. Esimerkiksi lisäksi standardin punavalkoinen voit NavajoWhite (#FFDEAD) tai Honeydew2 (# E0EEE0):

body {background-color: violetti, }.

Jälkimmäinen vaihtoehto on RGB tai RGBA merkintä voit määrittää paitsi väri, mutta myös avoimuutta CSS tausta, mutta menetelmä toimii vain IE-versiot yli 9. Muut selaimet tunnistavat normaalin version kanssa avoimesti. Mukaan W3C-standardeja on edullista käyttää vielä RGBA sijaan tavallisempaa RGB.

Viimeinen arvo RGBA taustalla ja asettaa peittävyyttä 0 (läpinäkyvä) ja 1 (läpinäkymätön).

On joitakin epätavallisia arvoja. Taustan väri voidaan asettaa käyttämällä HSL ja HSLA. Molemmat lisättiin CSS3, ja näin ollen eivät tue IE versio 9 tai korkeampi. Suoritusmuodoissa identtisiä RGB tai RGBA, vain eri muodossa: värisävyn (sävy - arvo väriympyrässä, on annettu asteina), Kyllästä (kylläisyys - värin intensiteetin prosentteina, 0-100), keveys (keveys - kirkkaus, samalla tavalla mitattu parametri Kyllästä ).

Attribute background-image

Kaikkein rajat selaimen versio läpinäkyvä tausta - tämä on käyttää kuvan. CSS3, voit määrittää vielä lisää kuvia, tämä tapahtuu pilkku. esimerkiksi:

{Tausta-kehon kuva: url (bg1.png), url (bg2.png)}.

Tämä tapa tukea jopa IE8. Useita kuvia taustalla kumin käytetyn asettelun. Tärkeää on, älä unohda käyttää mitä tahansa kuvaa ja asettaa taustavärin CSS, sillä käyttäjät voivat yksinkertaisesti ladata kuvan.

Attribute tausta-asema

Jos käytät kuvan asettaa taustan yksikkö, CSS voit sijoittaa kuvan missä tahansa näytöllä. Oletuksena kuva sijaitsee vasemmassa yläkulmassa. Taito vie joko suullisia ohjeita (ylä, ala, vasen, oikea), numeerinen (korot, pikseliä ja muita yksiköitä). Tällöin on määritettävä kaksi arvoa, vaaka- ja pystysuunnassa:

body {tausta-asemassa: oikea keskelle ;} - tässä esimerkissä, kuvio sijoitetaan oikealla puolella sivun ylä- ja alareunassa kuvan etäisyys sama.

Attribute tausta-size

Joskus on tarpeen venyttää CSS taustan tai pienentää sen kokoa. Tehdä tämän, attribuuttia tausta-koon, ja koko tausta voidaan asettaa pikseliä tai prosentteina, ja muut yksiköt.

Tällä määrite, on olemassa joitakin ongelmia: oikea näyttö taustan aiemmissa versioissa selaimen etuliitteitä voidaan käyttää. Tietenkin nykyinen versio tukee täysin tämän ominaisuuden ja tarvitaan erityisiä ominaisuuksia katosi.

Attribute tausta-kiinnitys

Tämä määrite käyttäytymistä taustakuvien taas rullata. Niin, se voi kestää 3 arvoa (ei sisällä Peri, yhteensä kaikkien määritteet tässä artikkelissa):

• kiinteä - tekee kuvasta taustalla kiinteiden;
• selaa - tausta rullaa kanssa loput elementit;
• paikallinen - kuvan taustalla pyörähtää jos vieritys on sisältöä. Tausta, joka ylittää kehyksen sisällön on kiinteä.

Esimerkki käytöstä:

body {background-attachment kiinteä}.

Tällä hetkellä Firefox ei tue viime omaisuus (paikallinen).

Attribute tausta-alkuperää

Tämä ominaisuus on vastuussa paikoituselimessä. Vanhat selaimet vaativat etuliitteitä. Ominaisuus itsessään on kolme parametrit:

• padding-laatikko on sijoitettu reunaan nähden kuvio, ottaen huomioon paksuus kehyksen;
• raja-box ominaisuuksia, jotka poikkeavat edellisestä, että rajalinja voi olla kokonaan tai osittain päällekkäin kuvion;
• content-box paikannus kuva pryavyazyvaya sen sisältöä.

Jos määrittelet useita arvoja, niin selaimet voivat reagoida omalla tavallaan: Firefox ja Opera hahmottaa vain ensimmäinen vaihtoehto.

Attribute tausta-repeat

Pääsääntöisesti, jos taustakuvan on määritelty, se on toistettava vaaka- tai pystysuunnassa. Tästä ja käytetään määritettä tausta-toista. Siten, lohko tausta, CSS, joka sisältää sellainen ominaisuus, voi olla yksi useista parametreista:

• no-repeat - kuva näkyy sivun yhden version;
• Toistan - tausta toistuu x- ja y;
• toista-x - vain vaakasuoraan;
• toista-y - vain pystysuunnassa;
• avaruus - tausta toistuu, mutta jos tilaa on mahdotonta täyttää väliin kuvat näyttää tyhjältä;
• kierros - kuva skaalataan, jos se ei täytä koko alueen koko kuvaa.

Esimerkki ominaisuudet:

body {tausta-repeat: no- toista toista} - samanlainen tausta-repeat: toista-y.

CSS3 voidaan määrittää niiden arvot useita kuvia, kun listalle parametreja, jotka on erotettu pilkuilla.

Attribute tausta-clip

Tämä attribuutti käyttäytymistä tausta-rajapintoihin (esim., Kun kyseessä on pisteviivalla merkittyjen kehysten):

• täyte-box - tausta näkyy sisätilojen lohkon;
• border-box - kuva näyttää puitteissa;
• content-box - kuvan taustalla näkyy vain sisällössä.

Esimerkki käytöstä:

body {tausta-clip: sisältö- laatikko;}.

Chrom ja Safari vaativat -webkit- etuliite.

Opasiteetti ominaisuudet ja suodatin

peittävyyttä ominaisuuden avulla voit asettaa läpinäkyvyyttä tausta - CSS omaisuus toimi kaikissa selaimissa. Arvo asetetaan alueella 0,0-1,0 lukien. Tällöin voit asettaa läpinäkyvyyttä CSS tausta ei kokonaisluku sijasta 0,3 riittää kirjoittaa 0,3:

.block {background-image: url ( img.png); opasiteetti: 0,3;}.

Asettaa tausta opasiteetti, CSS sopii myös IE alle yhdeksännen versio, käyttää suodatinta ominaisuus:

.block {background-image: url ( img.png); suodatin: alfa (opasiteetti = 30)}.

Tässä tapauksessa opasiteettiarvoksi asetetaan välille 0 ja 100. Huomaa, että opasiteetti niille eri läpikuultavuusasetuksia kautta RGBA perintö: käytettäessä peittävyyden selviää paitsi taustalla, mutta myös kaikki elementit laitteen sisällä.

Aina seurata käyttötietoja IVY selaimia ja kaikkia muita maita. Suurin ongelma kaikkien DTP - vanhemmat versiot IE, he eivät salli käyttää täysimääräisesti CSS3. Layout älä unohda käyttää erityispalveluja että onko selain tukee CSS omaisuutta. Jos et voi asentaa vanhempia versioita selaimet, löytää palvelu, joka tarkistaa työmaalla useissa selaimissa verkossa.