Ar Advent CSS3 DTP darbu daudzējādā ziņā ir kļuvis vieglāk un loģiskāk: galu galā, jūs tagad var darīt, lai elastīgi konfigurēt objektu, retāk spiesti JavaScript.Pieņemsim, ka jums ir nepieciešams, lai pielāgotu fona pārredzamību - CSS uzreiz piedāvā vairākas iespējas.
fons nosaka atribūtu kopumu (fona attēlu, fona amats, fona izmēra, fona atkārtot, fona piestiprināšanas, fona izcelsmes, fona klips, fona krāsu), no kuriem katrs var tikt noteikti atsevišķi vaiapvienot zem viena atribūtu fona.Ļaujiet mums pārbaudīt katru no tiem sīkāk.
atribūtika fona krāsu
CSS, fona krāsu var iestatīt vairākos veidos: izmantojot heksadecimālo kodu, krāsu nosaukumu vai RGB-ierakstu.In CSS3 kļuva iespējams izmantot, nevis RGB-ierakstīšanas iespēju ar RGBA.
hex krāsu kods ir rakstīts īpašumu pēc režģi: background-color: # FFDAB9.Ja rakstzīmes pāriem saskaņot šādu ierakstu, kods ir parasti nedaudz cut: # ccff00 var rakstīt kā # cf0:
body {background-color: # cf0;}.
vārdu tur, pat visvairāk eksotiskās krāsās.Piemēram, papildus standarta sarkanā un baltā krāsā, jūs varat izmantot NavajoWhite (#FFDEAD) vai Honeydew2 (# E0EEE0):
ķermeni {background-Krāsa: Violeta;}.
pēdējais variants RGB vai RGBA ieraksts ļauj norādīt ne tikai krāsu, bet arī par fona CSS pārredzamību, bet veids, kā strādāt IE 9 tikai vecākām versijām.Citas pārlūkprogrammas atzīt normāls variants ar pārredzamību.Saskaņā ar W3C standartiem vēlams izmantot visu to pašu RGBA nevis vairāk parasto RGB.
pēdējā vērtība pie RGBA nosaka fona dūmainību un no 0 (caurspīdīgs) līdz 1 (necaurspīdīgs).
Ir dažas neparastas vērtības.Fona krāsu var norādīt, izmantojot HSL un HSLA.Abi tika pievienoti CSS3, un tāpēc neatbalsta IE versija 9 vai augstāka.Iespējas ir identiski RGB vai RGBA, tikai citā formātā: Hue (Hue - vērtība uz krāsu riteņa, ir dots grādos), piesātinātās (piesātinājums - krāsu intensitāti procentos no 0 līdz 100), Lightness (vieglums - spilgtums, mērot līdzīgi parametru piesātināt).
atribūtika fona attēlu
visvairāk pārrobežu pārlūku versija caurspīdīgu fonu - ir izmantot attēla.In CSS3, jūs varat norādīt vēl vairākus attēlus, tas tiek darīts ar komatu.Piemērs:
body {background-image: url (bg1.png), url (bg2.png)}.
atbalsta šo pat IE8.Vairāki attēlus kā fona izmanto izkārtojumu gumijas.Svarīgi, neaizmirstiet izmantot jebkuru attēlu kā noteikts jūsu CSS fona krāsu, jo lietotāji var vienkārši augšupielādēt attēlu.
atribūtika fona pozīcijas
Ja jūs izmantot attēlu, lai noteiktu fona bloku, CSS ļauj pozicionēt attēlu jebkurā vietā uz ekrāna.Pēc noklusējuma attēls atrodas augšējā kreisajā stūrī.Atribūts pieņemt jebkurus mutiskus norādījumus (augšējā, apakšējā, pa kreisi, pa labi), vai skaitliskā (procentu, pikseļi un citas vienības).Ir nepieciešams precizēt divas vērtības horizontālā un vertikālā:
ķermeņa {fona-vieta: pa labi centram;} - šajā piemērā, fona atradīsies labajā pusē lapas, ar augšas un apakšas attālums līdz attēlam ir vienādi.
atribūtika background-size
Dažreiz Jums ir nepieciešams, lai izmantotu CSS stiept fonu vai samazināt tās lielumu.Šim nolūkam, atribūtu background-size, un tā lielums var definēt kā fona pikseļi vai procentos, vai jebkurā citā mērvienībā.
Ar šo atribūtu, ir dažas problēmas: pareizai displeja fona vecākiem pārlūkprogrammām jums ir izmantot prefiksu.Protams, pašreizējās versijas pilnībā atbalsta šo atribūtu un nepieciešamību pēc īpašas īpašības pazuda.
atribūtika fona pieķeršanās
Šis raksturlielums norāda uzvedību fona attēlu, kad ritināšanu.Piemēram, tā var veikt 3 vērtības (izņemot mantot, kopā par visiem atribūtiem šajā rakstā):
- fiksēta - padara attēlu uz fona noteikta;
- ritināšanas - fona ritināt ar pārējo elementu;
- vietējais - attēls uz fona ir apskatus, ja ritinot ir saturs.Fons, kas pārsniedz saturs ir fiksēts.
Piemērs izmantošanas:
body {background-arestu fiksēts}.
Pašlaik Firefox neatbalsta jaunāko īpašumu (vietējā).
atribūtika fona izcelsmes
Šis raksturlielums ir atbildīgs par novietojumu elementa.Pārlūkprogrammas iepriekšējās versijas pieprasīt izmantot prefiksu.Īpašums pati ir trīs parametri:
- polsterējums kastes pozīcijas no malas fonā, vienlaikus ņemot vērā biezumu rāmja;
- robeža-box īpašības atšķiras no iepriekšējās ar to, ka robeža līnija var būt pilnīgi vai daļēji segtu fona;
- saturs-box pozicionēšanas attēls pryavyazyvaya tās saturu.
Ja norādāt vairākas vērtības, pārlūks var reaģēt savā veidā: Firefox un Opera pieņemt tikai pirmo variantu.
atribūtika fona atkārtot
Kā likums, ja fona attēls ir norādīts, tas ir jāatkārto, horizontāli vai vertikāli.Par šo un izmanto atribūtu fona atkārtot.Tādējādi bloks fona, CSS, kas satur šādu īpašumu, var būt viens no vairākiem variantiem:
- no-atkārtot - attēls parādās lapā vienotā veidā;
- atkārtot - modelis atkārtots x un y;
- atkārtotu x - tikai horizontāli;
- atkārtotu y - tikai vertikāli;
- telpa - raksts atkārto, bet, ja telpa ir piepildīta nav, tad tur ir tukšumu starp attēliem;
- kārta - attēls tiek samazināts, ja tas nav jāaizpilda visā platībā visu ainu.
piemērs atribūts:
body {background-atkārtot: no-atkārtot atkārtot} - līdzīgi background-atkārtot: atkārtoju-y.
In CSS3 var noteikt vērtības dažādiem attēliem, ja pārsūtīšanu parametri atdalīti ar komatiem.
atribūtika fona klips
Šis raksturlielums norāda uzvedību fona zem robežas (piemēram, attiecībā uz punktotajām rāmjiem):
- polsterējums-box - fona attēlots interjera bloka;
- robeža-box - nāk ietvaros attēla;
- saturs-box - attēlu uz fona parādās tikai saturu.
Piemērs izmantošanas:
body {background-clip: saturs-box;}.
Chrom un Safari nepieciešams izmantot priedēkli -webkit-.
necaurredzamība atribūtu un filtrēt
necaurredzamība atribūtu ļauj iestatīt fona pārredzamību - CSS īpašums strādās visās pārlūkprogrammās.Vērtība ir regulējams no 0,0 līdz 1,0 ieskaitot.Ar šo jūs varat iestatīt fona CSS pārskatāmību bez skaitlim vērtības, nevis 0,3, ir pietiekami, lai rakstītu .3:
.block {fona bildi: url (img.png);necaurredzamība: .3;}.
Lai uzstādītu fona pārredzamību, CSS ir piemērots pat IE zem devīto versiju, izmantojiet atribūts filtru:
.block {background-image: url (img.png);filtrs: alfa (necaurredzamība = 30);}.
Tādā gadījumā necaurredzamība ir noteikts no 0 līdz 100. Jāņem vērā, ka necaurredzamība pāradresēt dažādus pārskatāmības iestatījumus, izmantojot RGBA iedzimtību: necaurredzamība izmantojot caurspīdīgu fonu, ir ne tikai, bet arī visas preces iekšpusē vienību.
Vienmēr pārliecinieties pārlūku izmantošanas statistika NVS un visām pārējām valstīm.Lielākā problēma visu DTP - vecākas versijas IE, tie neļauj pilnībā izmantot CSS3.Ja izkārtojums neaizmirstiet izmantot īpašos pakalpojumus, kas pārbaudītu, vai jūsu pārlūkprogrammā ir īpašums CSS.Ja jūs nevarat instalēt vecākas versijas pārlūkiem, jūs saņemt pakalpojumu, kas pārbauda to darbību vietas dažādās pārlūkprogrammās tiešsaistē.
