Tekkega CSS3 DTP töö paljuski muutunud lihtsamaks ja loogilisemaks: pärast kõik, mida saab nüüd teha paindlikult konfigureerida objekt, harvem pöörduvad JavaScript.Oletame, et teil on vaja kohandada läbipaistvuse taustal - CSS kohe mitu võimalust.
tausta määratletud omaduste kogum (background-image, tausta positsioonis, background-suurus, background-repeat, background-manusena tausta päritolu, tausta-clip, background-color), millest igaüks saab ette üksi võiühendada samadel atribuut taust.Uurime kõik need detailsemalt.
atribuut background-color
CSS, taustavärvi saab määrata mitmel viisil: kasutades heksadesimaalikoodia värvi nime või RGB-kirje.In CSS3 oli võimalik kasutada asemel RGB-salvestamise võimalus koos RGBA.
hex värvikood on kirjutatud vara pärast võre: background-color: # FFDAB9.Kui tähemärki paari sobitada selline rekord, kood on tavaliselt veidi lõigatud: # ccff00 võib kirjutada # cf0:
keha {background-color: # cf0;}.
nimi on, isegi kõige eksootilisem värve.Näiteks lisaks standard punane ja valge, saate NavajoWhite (#FFDEAD) või Honeydew2 (# E0EEE0):
keha {background-color: lilla;}.
viimane variant RGB või RGBA rekord võimaldab määrata mitte ainult värvi, vaid ka läbipaistvuse taustal CSS, kuid kuidas töötada IE 9 ainult vanemad versioonid.Teised brauserid tunda normaalne variant läbipaistvust.Vastavalt W3C standardid on eelistatav kasutada kõik sama RGBA asemel veel tavaline RGB.
viimase väärtus RGBA seab läbipaistmatus tausta ning 0 (läbipaistev) kuni 1 (läbipaistmatu).
Leidub ebatavaline väärtusi.Taustavärvi saab määrata kasutades HSL ja HSLA.Mõlemad lisati CSS3 ning seetõttu ei toeta IE version 9 või kõrgem.Valikud on identsed RGB või RGBA, lihtsalt erinevas formaadis: Hue (värvitoon - väärtus värvi ratas, on antud kraadides), immutama (küllastus - värvi intensiivsuse protsendina 0 kuni 100), kergus (kergus - heledus, mõõdetavad parameetri immutama).
atribuut background-image
kõige piiriülese brauseri versiooni läbipaistev taust - on kasutada pildi.In CSS3 saate määrata isegi rohkem pilte, seda tehakse läbi komaga.Näide:
keha {background-image: url (bg1.png), url (bg2.png)}.
toetab seda isegi IE8.Mitmed pildid taustaks kasutada paigutus kummist.Oluline on, ärge unustage kasutada mistahes pilt nagu teie CSS taustavärvi, sest kasutajad saavad lihtsalt oma pilte.
atribuut tausta positsioonis
Kui kasutate pildi määratleda tausta plokk, CSS võimaldab teil seisukoht pilti suvalisse kohta ekraanil.Vaikimisi pilt asub üleval vasakus nurgas.Omaduste võta endale verbaalne suunas (üleval, all, vasakul, paremal), või numbriline (huvi pikslit ja muud üksused).On vaja täpsustada kahe väärtuse horisontaalse ja vertikaalse:
keha {background-asendis: õige center;} - selles näites taustal hakkab asuma paremal pool lehekülge, ülemise ja alumise osa kaugus pilt on sama.
atribuut background-size
Mõnikord on vaja kasutada CSS venitada taustal või vähendada selle suurust.Selleks atribuut background-suurus ja suuruse saab defineerida kui tausta piksleid või protsent, või mõnel muul mõõtühik.
Selle atribuudi, seal on mõned probleemid: õige väljapaneku tausta vanemate brauseritega peate kasutama eesliidet.Muidugi, praeguses versioonis täielikult toetada seda omadust ja vajadust spetsiifiliste omaduste kadunud.
atribuut taust-kinnitus
See omadus täpsustab käitumise taustapilt kerimisel.Näiteks võib võtta 3 väärtusi (va pärida, et kokku kõik atribuudid selles artiklis):
- fikseeritud - teeb pildi taustal fikseeritud;
- leidke - tausta kerib ülejäänud elemente;
- kohaliku - pildi taustal keritakse kui kerimine on sisu.Taust, mis ületab sisu on fikseeritud.
Näide kasutamine:
keha {background-manusena fikseeritud}.
Praegu Firefox ei toeta hiljemalt vara (kohalik).
atribuut tausta päritolu
See omadus on vastutav positsioneerimine element.Brauserid varasemad versioonid on vaja kasutada eesliiteid.Kinnistu ise on kolm parameetrit:
- padding-box seisukohti äärest taustal, võttes samal ajal arvesse raami paksuse;
- piiri-box omadused erineb eelmisest selle poolest, et piirijoone võib olla osaliselt või täielikult katta tausta;
- sisu-box positsioneerimine pilti pryavyazyvaya sisu.
Kui määrate mitu väärtust brauser ei reageeri omal moel: Firefox ja Opera ainult nõustuda esimese variandi.
atribuut background-korrata
Üldjuhul kui taustapilt on määratud, siis tuleb korrata horisontaalselt või vertikaalselt.Sel ja kasutada atribuudi background-repeat.Seega, plokk tausta, CSS, mis sisaldab sellist vara võib olla üks paljudest võimalustest:
- no-repeat - pilt lehel kuvatakse ühes vormis;
- korrata - muster kordub x ja y;
- korduva x - ainult horisontaalselt;
- korduva y - ainult vertikaalselt;
- ruumi - muster kordub, aga kui ruum on täidetud ei, siis on tühjad piltide vahele;
- ringi - pilt skaleeritakse, kui ta ei täida kogu ala kogu pilt.
Näide atribuut:
keha {background-repeat: no-repeat korrata} - sarnaselt background-repeat: korrake-y.
In CSS3 võib määrata väärtused mitu pilti kui siirdeparameetreid eraldatakse komaga.
atribuut background-clip
See omadus täpsustab käitumise taustal all piirid (näiteks juhul, kui paberisse raamid):
- padding-box - tausta kuvatakse sisemuse block;
- piiri-box - kuulub pildi;
- sisu-box - pildi taustal paistab ainult sisu.
Näide kasutamine:
keha {background-clip: sisu-box;}.
Chrom ja Safari on vaja kasutada eesliidet -webkit-.
läbipaistmatus atribuudi ja filtreerida
läbipaistmatus atribuudi abil saab määrata tausta läbipaistvus - CSS vara töötab kõik brauserid.Väärtus on reguleeritav 0,0-1,0 kaasa arvatud.Selle saab määrata läbipaistvuse taustal CSS ilma täisarvuni asemel 0,3 on piisavalt kirjutada .3:
.block {background-image: url (img.png);läbipaistmatus: 3.;}.
seadmine tausta läbipaistvust, CSS sobib ka IE allpool üheksas versioon, kasutada atribuudi filter:
.block {background-image: url (img.png);filter: alpha (läbipaistmatuse = 30);}.
Sel juhul läbipaistmatus on vahemikus 0 kuni 100. Tuleb märkida, et läbipaistmatus atribuudi erinevad läbipaistvust seadistusi RGBA pärilikkus: läbipaistmatust kasutades läbipaistev taust on mitte ainult, vaid ka kõik teemad seadme sees.
Alati veenduge brauseri kasutamise statistika SRÜ ja kõigis teistes riikides.Suurim probleem kõigi DTP - vanemad versioonid IE, need ei võimalda kasutada täielikult CSS3.Kui paigutus ärge unustage kasutada eriteenistuste, et kontrollida, kas teie brauser on vara CSS.Kui te ei saa installida vanemad versioonid brauserid, saad teenuse kontrollib tööks ala erinevad brauserid online.
