CSS fona pārredzamība. Caurspīdīgs fons vai tekstu ar CSS

Ar Advent CSS3 web dizaineri strādā daudzējādi ir kļuvis vieglāk un loģiskāk: galu galā, tagad varat patiešām elastīgi pielāgot jebkuru objektu, retāk spiesti JavaScript. Pieņemsim, ka jums ir nepieciešams, lai pielāgotu fona caurspīdīguma - CSS uzreiz piedāvā vairākas iespējas.

Fona nosaka atribūtu kopumu (fona attēlu, fona pozīciju , fona izmēra, fona, atkārtotu, fona piestiprināšanas, fona, izcelsmes, fona klips, fona krāsu), no kuriem katrs var piešķirt atsevišķi vai kopā ar atribūta fona. Ļaujiet mums pārbaudīt katru no tiem sīkāk.

Atribūtu fona-krāsu

CSS, fona krāsu var iestatīt vairākos veidos: izmantojot heksadecimālo kodu, krāsu nosaukumu vai RGB ierakstu. Ar CSS3 tas kļuva iespējams izmantot, nevis RGB ierakstīšanas iespēju ar RGBA.

Hex krāsu kods ir ierakstīts īpašumā pēc režģa: background-color: # FFDAB9. Ja rakstzīmēm šajā ierakstu ir tie paši pāri, kods parasti ir nedaudz samazināt: # ccff00 var rakstīt kā # cf0:

body {background-color: # cf0 ;}.

Nosaukums ir, pat visvairāk eksotisko krāsas. Piemēram, papildus standarta sarkanā un baltā krāsā, varat izmantot NavajoWhite (#FFDEAD) vai Honeydew2 (# E0EEE0):

body {background-color: purple; }.

Pēdējais variants ir RGB vai RGBA ieraksts ļauj norādīt ne tikai krāsu, bet arī caurspīdīgumu CSS fona, bet metode darbojas tikai IE versijām, kas vecāki par 9. Citas pārlūkprogrammas atzīt parasto versiju ar pārredzamību. Saskaņā ar W3C standartiem, tas ir ieteicams izmantot vēl RGBA nevis vairāk parasto RGB.

Pēdējais vērtība RGBA fonā un nosaka necaurredzamību no 0 (caurspīdīgs) līdz 1 (necaurspīdīgs).

Ir daži neparastas vērtības. Fona krāsu var iestatīt, izmantojot HSL un HSLA. Abi tika pievienoti CSS3, un tāpēc neatbalsta IE versiju 9 vai augstāka. Realizētā identiska RGB vai RGBA, tikai citā formātā: Hue (toni - vērtība uz krāsu riteņa, ir dots grādos), piesātinātās (piesātinājums - krāsas intensitāte procentos no 0 līdz 100), Lightness (vieglums - spilgtums, mērot līdzīgi parametrs piesātināt ).

Atribūtu fona-image

Visvairāk pārrobežu pārlūku versija caurspīdīgu fonu - tas ir izmantot attēla. Ar CSS3, jūs varat uzstādīt vēl vairākus attēlus, tas tiek darīts ar komatu. piemērs:

{Background-body attēls: url (bg1.png), URL (bg2.png)}.

Tādā veidā atbalstīt pat IE8. Vairāki attēlus fonā gumijas izmantoto izkārtojumu. Svarīgi, neaizmirstiet izmantot jebkuru attēlu un noteikt fona krāsu CSS, jo lietotāji var vienkārši augšupielādēt attēlu.

Atribūtu fona-pozīciju

Ja jūs izmantot attēlu, lai uzstādītu fona vienību, CSS ļauj novietot attēlu jebkurā vietā uz ekrāna. Pēc noklusējuma attēls atrodas augšējā kreisajā stūrī. Atribūtu notiek vai nu mutiski norādījumi (augšā, apakšā, pa kreisi, pa labi), skaitlisko (procenti, pikseļi un citas vienības). Tādā gadījumā, jums ir jānorāda divas vērtības, horizontālās un vertikālās:

body {background-amats: labais centrs ;} - šajā piemērā, modelis atradīsies labajā lapas pusē, augšā un apakšā attēla attālumu līdz pats.

Atribūtu fona izmēra

Dažreiz tas ir nepieciešams, lai izstieptu CSS fona vai samazināt tās lielumu. Lai to izdarītu, izmantojiet atribūtu fona izmēra, un lielumu, fonu var noteikt pikseļos vai procentos, un jebkuras citas vienības.

Ar šo atribūtu, ir dažas problēmas: par jāizmanto pareiza displeju no fona iepriekšējās versijas pārlūka prefiksus. Protams, pašreizējā versija pilnībā atbalsta šo atribūtu, un vajadzība pēc specifiskām īpašībām pazuda.

Atribūtu fona-pielikumu

Šis raksturlielums norāda uzvedību fona attēlus, kamēr ritinot. Tātad, tas var aizņemt 3 vērtības (neskaitot mantot, kopējā visiem atribūtiem apsprieda šo rakstu):

• fiksētā - padara attēlu uz fona fiksēts;
• ritināt - fona ruļļus ar pārējiem elementiem;
• vietējais - attēls uz fonā ritināt ja ritināšanu ir saturs. Fona kas pārsniedz saturu rāmja ir fiksēts.

Piemērs izmantošanas:

body {background-attachment fiksēts}.

Pašlaik Firefox neatbalsta pēdējo īpašumu (vietējā).

Atribūtu fona-izcelsmi

Šis atribūts ir atbildīgs par pozicionēšanas elementu. Agrīnie pārlūkprogrammas pieprasa izmantot prefiksu. Īpašums pati ir trīs parametri:

• padding-box ir novietots attiecībā pret malas modeli, vienlaikus ņemot vērā biezumu rāmja;
• border-box īpašības, kas atšķiras no iepriekšējās ar to, ka robežlīnija, var būt pilnīgi vai daļēji pārklājas modeli;
• satura box pozicionēšanas attēlu pryavyazyvaya tās saturu.

Ja norādāt vairākas vērtības, tad pārlūkprogrammas var reaģēt savā veidā: Firefox un Opera uztver tikai pirmo variantu.

Atribūtu fona atkārtošanu

Kā likums, ja fona attēlu ir norādīts, tas jāatkārto horizontāli vai vertikāli. Par šo un izmanto atribūtu fona atkārtošanu. Tādējādi, bloķēt fona, CSS, kas satur šādu īpašumu, var būt viens no vairākiem parametriem:

• no-atkārtot - attēls parādās lapā vienā versijā;
• atkārtot - fons tiek atkārtots X un Y;
• atkārtot-x - tikai horizontāli;
• atkārtot-y - tikai vertikāli;
• telpa - fons tiek atkārtota, bet, ja telpa ir iespējams aizpildīt starp attēliem ir tukšs;
• kārta - attēls ir samazināts, ja tas nav aizpildīt visu laukumu veselu attēlus.

Piemērs no atribūtiem:

body {background-atkārtot: kas neizraisa atkārtot atkārtot} - līdzīgs background-atkārtot: atkārtot-y.

Ar CSS3 var norādīt vērtības vairākiem attēliem, uzskaitot parametrus, kas atdalīti ar komatiem.

Īpašības fona klipu

Šis atribūts nosaka uzvedību fona zem robežas (piemēram, attiecībā uz punktotajos rāmji):

• padding-box - fona redzams iekšpusē bloku;
• border-box - attēls nāk ietvaros;
• satura box - attēlu uz fona tiks rādīta tikai saturu.

Piemērs izmantošanas:

body {background-clip: saturs, kaste;}.

Chrom un Safari prasa -webkit- prefiksu.

Necaurredzamība atribūti un filtru

necaurredzamība atribūts ļauj iestatīt fona caurspīdīguma - CSS īpašums darbosies visās pārlūkprogrammās. Kā vērtība tiek iestatīts robežās no 0,0 līdz 1,0 ieskaitot. Tādā gadījumā jūs varat iestatīt caurskatāmību CSS fona neviena skaitļa vērtība, nevis 0,3, ir pietiekami, lai rakstītu .3:

.block {background-image: url ( img.png); necaurredzamība: .3;}.

Lai uzstādītu fona necaurredzamība, CSS ir piemērots pat IE zem devīto versiju, izmantojiet filtru atribūtu:

.block {background-image: url ( img.png); filtrs: alfa (necaurredzamība = 30)}.

Šajā gadījumā necaurredzamība vērtība atrodas starp 0 un 100. Jāņem vērā, ka necaurredzamība atribūts dažādus pārredzamības iestatījumus, izmantojot RGBA mantojumu: ja izmantojat necaurredzamība kļūst skaidrs ne tikai fons, bet arī visus elementus, iekšpusē vienību.

Vienmēr kontrolēt savu lietojuma statistiku NVS pārlūkprogrammās un visās citās valstīs. Lielākā problēma visām DTP - vecākas versijas IE, tie neļauj jums izmantot pilnā apjomā CSS3. In izkārtojums neaizmirstiet izmantot īpašus pakalpojumus, kas pārbaudītu, vai jūsu pārlūkprogramma atbalsta jebkuru CSS īpašumu. Ja jūs nevarat instalēt vecākas versijas pārlūkiem, atrast pakalpojumus, kas būs pārbaudīt vietnes darbu vairākās pārlūkprogrammās tiešsaistē.