CSS tausta läbipaistvust. Läbipaistev taust või teksti CSS

Tekkega CSS3 veebidisainerid töö mitmeti muutunud lihtsamaks ja loogiline: ju saate nüüd tõesti paindlikult kohandada mis tahes objekt, harvem pöörduvad JavaScript. Oletame, et teil on vaja kohandada läbipaistvuse taustal - CSS kohe pakub mitmeid võimalusi.

Taust määratletud omaduste kogum (background-image, taust asendis , background-suurus, background-repeat, background-manusena background-päritolu, background-clip, background-color), millest igaüks saab omistada eraldi või kombineeritud all atribuuti taustal. Uurigem iga neist üksikasjalikult.

Oskus background-color

CSS, taustavärvi saab määrata mitmel viisil: kasutades kuueteistkümnendkoodi, värvi nime või RGB-kirje. In CSS3 sai võimalikuks kasutada asemel RGB-salvestus variant RGBA.

Kuueteistkümnendvärv koodi registreeritakse vara pärast võre: background-color: # FFDAB9. Kui märgid selle kirje on sama paari, kood on tavaliselt veidi lõigatud: # ccff00 võib kirjutada # cf0:

body {background-color: # cf0 ;}.

Nimi on isegi kõige eksootilisem värve. Näiteks lisaks standard punane ja valge saab kasutada NavajoWhite (#FFDEAD) või Honeydew2 (# E0EEE0):

body {background-color: lilla; }.

Viimane variant on RGB või RGBA kanne võimaldab määrata mitte ainult värvi, vaid ka läbipaistvuse CSS tausta, kuid meetod töötab ainult IE versioonid vanemad kui 9. Teised brauserid tunda tavaversioon läbipaistvust. Vastavalt W3C standarditele on eelistatav kasutada veel RGBA asemel veel tavaline RGB.

Viimane väärtus RGBA tausta ja komplektid läbipaistmatust 0 (läbipaistev) kuni 1 (läbipaistmatu).

Leidub ebatavaline väärtusi. Taustavärvi saab määrata kasutades HSL ja HSLA. Nii lisati CSS3 ja seetõttu ei toeta IE versioon 9 või kõrgem. Kehastused identsed RGB või RGBA ainult erinevas vormis: Hue (varju - raha värviketta, on antud kraadides), küllastada (küllastus - värvi intensiivsust protsendina, 0-100), kergus (kergus - heledus, mõõdetakse sarnaselt parameeter küllastada ).

Oskus background-image

Kõige piiriülese brauser versiooni läbipaistev taust - see on kasutamise pilt. In CSS3, saate isegi rohkem pilte, seda tehakse läbi komaga. näiteks:

{Background-kehakujutlus: url (bg1.png), url (bg2.png)}.

See võimaldab toetada isegi IE8. Mitmed pildid taustal kasutatav kummi paigutus. Oluline on, ärge unustage kasutada mistahes pilt ja määrake tausta värvi CSS, kuna kasutajad saavad lihtsalt pilt üles laadida.

Oskus background-positsiooni

Kui kasutate pildi seada tausta üksus, CSS võimaldab teil paigutada pilt ekraanil suvalisse kohta. Vaikimisi pilt asub üleval vasakus nurgas. Oskus võtab kas verbaalne instrueerimine (top, all, vasakul, paremal), numbriline (huvi, pikslit ja muud üksused). Sel juhul tuleb teil määrata kahe väärtuse horisontaalse ja vertikaalse:

keha {background-asendis: õige keskus ;} - selles näites muster hakkab asuma paremal pool lehele, ülemise ja alumise pildi kaugus sama.

Oskus taustal suurusega

Mõnikord on vaja venitada CSS tausta või vähendada selle suurust. Selleks kasutage atribuuti background-suurus ja suurus taustal saab määrata pikslites või protsendid ja kõik teised üksused.

Selle atribuudi, on mõned probleemid: õige väljapaneku tausta varasemate versioonide brauser eesliiteid kasutada. Muidugi, praegune versioon toetab täielikult seda omadust ja vajadus spetsiifiliste omadustega kadunud.

Oskus background-manuse

See omadus määrab käitumist taustapilte kerimise ajal. Niisiis, see võib võtta 3 väärtused (välja arvatud pärida, kokku kõikide atribuutide arutatakse käesolevas artiklis):

• fikseeritud - teeb pildi taustal fikseeritud;
• liikuge - tausta kerib ülejäänud elemendid;
• Kohalik - pildi taustal on kerida, kui kerimine on sisu. Taust, mis ületab raami sisu on fikseeritud.

Näide kasutustingimused:

body {background-manus fikseeritud}.

Praegu Firefox ei toeta viimase vara (kohalik).

Oskus background-päritolu

See omadus on vastutav positsioneerimine element. Varajane brauserid on vaja kasutada eesliiteid. Omand on kolm parameetrit:

• polstri-box paikneks võrreldes servamuster, võttes samal ajal arvesse raami paksuse;
• border-box omadused erineb eelmisest selle poolest, et piirjoonel võib olla täielikult või osaliselt kattuvad struktuuris;
• content-box positsioneerimise pilti pryavyazyvaya selle sisu.

Kui määrate mitu väärtust, siis brauserid võivad reageerida omal moel: Firefox ja Opera tajuvad ainult esimene valik.

Oskus background-repeat

Üldjuhul, kui taustapilt on määratud, siis tuleb korrata horisontaalselt või vertikaalselt. Sel ja kasutatud atribuut background-repeat. Seega plokk tausta, CSS, mis sisaldab sellise vara võib olla üks paljudest parameetritest:

• no-repeat - pilti lehel on ühe versiooni
• korrata - tausta korratakse x ja y;
• korrata-x - ainult horisontaalselt;
• korrata-y - ainult vertikaalselt;
• ruumi - tausta korratakse, kuid kui ruumi on võimatu täita vahel pilte ilmuvad tühjad;
• vastupidi - pilt skaleeritakse, kui see ei täida kogu ala tervikuna pilte.

Näide atribuudid:

body {background-repeat: no korduse korduse} - sarnane taust kordustega: korrata-y.

In CSS3 võib määrata väärtused mitu pilti, kui loetletakse parameetrid, eraldatud komadega.

Oskus background-clip

See atribuut määratleb käitumist taustal all piirid (nt juhul paberisse raamid):

• padding-box - tausta kuvatakse sisemuse ploki;
• border-box - pilt kuulub raames;
• sisu-box - pildi taustal ilmuvad ainult sisus.

Näide kasutustingimused:

body {background-clip: sisu eest kasti;}.

Chrom ja Safari nõuda -webkit- eesliide.

Läbipaistmatus atribuudid ja filter

läbipaistmatus omadus võimaldab teil määrata läbipaistvuse taustal - CSS vara töötab kõikides brauseritega. Väärtuseks on vahemikus 0,0-1,0 kaasa arvatud. Sel juhul saate määrata läbipaistvuse CSS tausta ei täisarvuni asemel 0,3 piisab kirjutada 0,3:

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

Et määrata tausthägususe, CSS sobib ka IE alla üheksas versioon, kasutage filter atribuut:

.block {background-image: url ( img.png); filter: alfa (läbipaistmatuse = 30)}.

Sel juhul läbipaistmatust väärtus on vahemikus 0 kuni 100. Pidage meeles, et läbipaistmatust omistada erineva läbipaistvuse seaded kaudu RGBA pärandi kasutamisel läbipaistmatus selgub mitte ainult taustal, vaid ka kõik elemendid siseruumis.

Alati jälgida oma kasutust statistika SRÜ brauserid ja kõik teised riigid. Suurim probleem kõigi DTP - vanemad versioonid IE, nad ei lase sul kasutada täies ulatuses CSS3. Paigutuse ärge unustage kasutada eriteenistuste et kontrollida, kas teie brauser toetab igal CSS vara. Kui te ei saa installida vanemad versioonid brauseritega leida teenus, mis kontrollib kohapeal tööd mitu brauserid online.