Dëshironi të mësoni se si të krijoni faqe me një dizajn origjinal dhe të gjallë modern? Përdorimi i elementeve të tejdukshëm mund t'ju ndihmojë në zgjidhjen e kësaj detyre të vështirë. Sot do të shikojmë mënyrat kryesore praktike të vendosjes së transparencës së elementeve strukturorë.

Si mund ta vendos transparencën?

Nëse e konsiderojmë këtë temë përmes prizmit të zhvillimit historik të teknologjive të internetit, atëherë mund të dallohen qasjet e mëposhtme:

• Prona errësirë.
• Duke përdorur PNG -Foto
• Formati i sistemit RGBA
• Dhe së fundmi, antikiteti ose imazhe me kuadrate.

Perde e pronës CSS

Zbatimi i stilit CSSvetitë errësirë ju lejon të vendosni transparencën e elementit në të cilin aplikohet. Vlerat që mund të përdoren si argument variojnë nga 0 në 1.
Le të shohim një shembull.

< html> < head> < title> TODO jep një titull < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > Do të ketë shumë nga teksti juaj

/ * Sfondi për pjesën e faqes * / ) prozrachen (mbushje: 10px; / * Dhëmbëzimi për tekstin * / sfondi: darkturquoise; / * Vendosni ngjyrën e sfondit * / diferencë: 0 auto; / * Qendra bllok * / gjerësia: 50%; / * Vendosni gjerësinë e bllokut * / perde: 0,7; / * Vendos transparencën * / font: 48px / 64px Times New Roman; rreshto tekstin: justifikoj; )

Si rezultat, kemi një bllok të tejdukshëm:

E rendesishme !!!

1. Errësirëmerr vlera nga diapazoni: 0 (transparenca e plotë) - 1 (e paqartë).
2. Përputhshmëria ndërmjet shfletuesit. NË Dmth deri në versionin e shtatë përfshirës Errësirënuk mbështetet. Linja e mëposhtme do të ndihmojë për të arritur të njëjtën shfaqje të një elementi:

   filtri: alfa (Opacity \u003d 70);

   Duhet të merret parasysh se prona filtrimungon në htmlspecifikimet, ndryshon vlerat nga 1 në 100 dhe mund të zbatohen vetëm në elementet:

   • me pozicionim absolut ( pozicioni: absolut)
   • me një dimension linear fiks ( lartësia ose gjerësia).
3. Shkalla e transparencës trashëgohet nga fëmijët, ku fëmija mund të bëhet më transparent, por jo më pak. Dmth, në një sfond të tejdukshëm, mos bëj tekst të Qartë.

Për një kuptim më të mirë të materialit të paragrafit të fundit, në shembullin e mëparshëm, vendoseni tekstin në të bardhë.

ngjyra: e bardhe;

dhe e konsiderojnë atë nën një mikroskop:

Siç mund ta shihni, përmbajtja e bllokut (tekstit) tonë është bërë gjithashtu e tejdukshme. Por, çka nëse në praktikë nuk ju intereson transparenca e përmbajtjes, por vetëm transparenca e sfondit? Në këtë rast, shkoni te artikulli tjetër.

Përdorimi i imazheve PNG

Një tipar interesant i formatit PNGështë se ka 256 nivele transparence. Unë mendoj se ju keni kapur trenin e mendimit, dhe ndoshta keni ndërtuar tashmë një algoritëm për këtë qasje. Thjesht duhet ta shpreh.

Si rezultat, kemi një bllok me një sfond transparent dhe përmbajtje të paqartë:

E rendesishme !!!

1. Ndryshe nga prona errësirëtransparenca është vendosur vetëm për sfondin
2. Përputhshmëria ndërmjet shfletuesit. Punon pothuajse në të gjithë shfletuesit dhe kjo është një plus. Por transparenca PNGnuk mbështetet në IE6... Nëse jeni duke optimizuar faqen tuaj për një lashtësi të tillë, do t'ju duhet të përdorni metoda ose skenare të tjera.
3. Kur çaktivizoni shfaqjen e fotografive, sfondi juaj do të zhduket (merrni parasysh këtë pikë kur optimizoni shfaqjen në pajisjet mobile, sepse interneti i pakufizuar nuk është gjithmonë në dorë).
4. Për të ndryshuar ngjyrën dhe / ose transparencën, duhet të krijoni një imazh të ri dhe ta ngarkoni atë në server.

Formati i sistemit RGBA

Një nga metodat më moderne të ndryshimit të transparencës së sfondit është përdorimi i sistemit RGBA.

RGBA- sistemi i përfaqësimit të ngjyrave duke përdorur tre kanale standarde RGB(e kuqe, jeshile, blu), dhe e katërta, e ashtuquajtura Alfa-kanal që karakterizon shkallën e transparencës.

sfondi: rgba (r, g, b, a);

Në shembullin që tashmë e dimë, zëvendësoni përmbajtjen në CSSparaqisni në vijim:

trupi (sfondi: url (./ vaden- pro- logo. png); / * Wallpaper * / ) prozrachen (mbushja: 10px; sfondi: rgba (0, 206, 209, 0.7); margjina: 0 automatike; gjerësia: 50%; font: 48px / 64px Times New Roman; ngjyra: e bardhë; rreshtimi i tekstit: justifikimi;)

E rendesishme !!!

1. Ndryshe nga prona errësirëtransparenca është vendosur vetëm për sfondin
2. Ndryshe nga metoda PNGfotografi, për të ndryshuar ngjyrën ose shkallën e transparencës, ne vetëm duhet të ndryshojmë vlerat rgba.
3. Përputhshmëria ndërmjet shfletuesit. Punon në të gjithë shfletuesit modernë (duke filluar me IE9, Op10, Fx3,Sf3.2Për shfletuesit e vjetër, ose do të duhet të sakrifikoni transparencën ose të përdorni errësirë, png metodat.

Imazhe me kuadrate, ose respekt për historinë

Kjo metodë ishte në zanafillën e krijimit të faqes në internet, dhe unë pashë shfletues të vjetër që nuk dinin të bënin asgjë. Ai konsiston në krijimin e një sfondi me kuadrate, në të cilin sheshet me ngjyra alternative me ato transparente.

Si rezultat i aplikimit të një figure të tillë, u mor një sfond pseudo-transparent si sfond.

E rendesishme !!!

1. Kur shikoni tekst në një sfond të tillë, sytë mund të lodhen shpejt (sidomos dallgëzimet kur lëvizni shtypni poshtë).
2. Në aspekte të tjera, tiparet e aplikacionit janë të ngjashme me metodën "PNG-pictures".

Le ta përmbledhim?

• Duhet të ketë një pamje të ndritshme, jo monotone nën bllokun transparent. Në një sfond të thjeshtë, humbi transparencën.
• Kur zgjidhni një qasje specifike praktike, drejtohuni nga shfletuesit që përdor audienca juaj e synuar. Përputhshmëria ndërmjet shfletuesit është e rëndësishme.

Në këtë mësim, ne do të analizojmë të tillë CSS Vetitë - errësirë dhe RGBA... Prona Errësirë është përgjegjës vetëm për transparencën e elementeve dhe funksionin RGBA - për ngjyrën dhe transparencën, nëse specifikoni vlerën e transparencës së kanalit alfa.

Perde e CSS

Vlera numerike për errësirë specifikohet në intervalin nga 0,0 në 1,0, ku zero është transparencë e plotë dhe një, përkundrazi, është errësira absolute. Për shembull, për të parë transparencën 50%, duhet të vendosni vlerën në 0,5. Duhet të kihet parasysh se errësirë shtrihet në të gjithë fëmijët e prindit. Kjo do të thotë që teksti në një sfond të tejdukshëm do të jetë gjithashtu i tejdukshëm. Dhe kjo tashmë është një pengesë shumë domethënëse, teksti nuk qëndron aq mirë.

Në pamjen e ekranit, ju mund të shihni qartë që teksti i zi është bërë i njëjti gjysmë transparent si sfondi blu.

Div (
sfond: url (imazhe / yourimage.jpg); / * Fotografi në sfond * /
gjerësia: 750px;
lartësia: 100px;
diferencë: auto;
}
. blu (
sfond: # 027av4; / * Ngjyra e sfondit gjysmë transparente * /
perde: 0,3; / * Vlera e tejdukshmërisë së sfondit * /
lartësia: 70px;
}
h1 (
mbushje: 6px;
font-family: Arial Zi;
pesha e shkronjave: më e guximshme;
madhësia e shkronjave: 50px;
}

Transparenca e CSS në formatin RGBA

Formati për regjistrimin e ngjyrës RGBA, është një alternativë më moderne ndaj pronës errësirë. R (e kuqe), G (jeshile), B (blu) - do të thotë: e kuqe, jeshile, blu. Letra e fundit A - do të thotë kanali alfa, i cili vendos transparencën. RGBA Ndryshe nga Errësirë nuk prek fëmijët.

Tani le të shohim shembullin tonë duke përdorur RGBA... Le t'i zëvendësojmë këto rreshta në stile.

Sfondi: ## 027av4; /* Ngjyrë e sfondit */
perde: 0,3; / * vlera e tejdukshmërisë së sfondit * /

në rreshtin tjetër

Sfondi: rgba (2, 127, 212, 0.3);

Siç mund ta shihni, vlera e transparencës prej 0.3 është e njëjtë për të dy metodat.

Rezultati i shembullit me RGBA:

Pamja e dytë e ekranit duket shumë më mirë se e para.

Duke luajtur me tejdukshmërinë e sfondit të blloqeve, mund të arrini efekte interesante në sit. Shtë e rëndësishme që këto blloqe të tejdukshëm të kalojnë në një model të larmishëm siç është fotografia. Vetëm në këtë rast efekti do të jetë i dukshëm. Kjo teknikë është përdorur prej kohësh në dizajn, madje edhe para shfaqjes së ndonjë CSS3, ai u zbatua thjesht në programet grafike.

Nëse klienti kërkon paraqitjen që të duket mirë në versionet e vjetra të shfletuesit Internet Explorerpastaj shtoni pronën filtri dhe mos harroni të komentoni në mënyrë që vlefshmëria e kodit të mos preket.

Produkti

Formati RGBA të gjithë shfletuesit modernë janë të mbështetur përveç Internet Explorer... Alsoshtë gjithashtu shumë e rëndësishme që RGBA fleksibël, ai vepron vetëm në një element specifik të dhënë, pa prekur fëmijët. Clearshtë e qartë se kjo është më e përshtatshme për projektuesin e faqosjes. Zgjedhja ime është qartë në favor të formatit RGBA për të marrë transparenca në CSS.

Për një konsolidim më të mirë të materialit dhe një qartësi më të madhe, unë sugjeroj që të kaloni nëpër.

Me ardhjen e CSS3, puna e stilistëve është bërë shumë më e lehtë dhe më e logjikshme: tani ju mund të personalizoni me të vërtetë fleksibël çdo objekt, duke përdorur JavaScript gjithnjë e më pak. Le të themi se duhet të rregulloni transparencën e sfondit - CSS menjëherë ofron disa opsione.

Sfondi përcaktohet nga një grup atributesh, përsëritja e sfondit, bashkëngjitja e sfondit, origjina e sfondit, klipi i sfondit, ngjyra e sfondit) dhe secila prej tyre mund të shkruhet veçmas ose të kombinohen nën atributin e sfondit. Le të analizojmë secilën prej tyre në më shumë detaje.

Atributi i ngjyrës së sfondit

Edhe IE8 e mbështet këtë metodë. Disa imazhe përdoren si sfond në paraqitjen e lëngjeve. Më e rëndësishmja, mos harroni të vendosni ngjyrën e sfondit në CSS kur përdorni ndonjë imazh, pasi përdoruesit thjesht nuk mund ta ngarkojnë imazhin.

Atributi i pozicionit të sfondit

Nëse jeni duke përdorur një imazh për të vendosur sfondin e një blloku, CSS do t'ju lejojë të poziciononi imazhin kudo në ekran. Si parazgjedhje, imazhi ndodhet në këndin e sipërm të majtë. Atributi pranon ose indikacione verbale (sipër, poshtë, majtas, djathtas) ose tregues numerikë (përqindje, piksele dhe njësi të tjera). Në këtë rast, duhet të specifikoni dy vlera: horizontale dhe vertikale:

trupi (pozicioni i sfondit: qendra e djathtë;) - në këtë shembull, sfondi do të vendoset në anën e djathtë të faqes, me të njëjtën distancë të poshtme dhe të sipërme me figurën.

Atributi i madhësisë së sfondit

Ndonjëherë ju duhet të përdorni CSS për të shtrirë ose zvogëluar madhësinë e sfondit. Për ta bërë këtë, përdorni atributin e madhësisë së sfondit dhe madhësia e sfondit mund të vendoset si në pixel ose në përqindje, ashtu edhe në çdo njësi tjetër të matjes.

Ka disa probleme me këtë atribut: parashtesat duhet të përdoren për të shfaqur saktë sfondin në versionet e mëparshme të shfletuesve. Sigurisht, versionet aktuale e mbështesin plotësisht këtë atribut dhe nevoja për veti specifike është zhdukur.

Atributi i bashkëngjitjes në sfond

Kjo atribut specifikon sjelljen lëvizëse të imazhit të sfondit. Pra, mund të marrë 3 vlera (duke përjashtuar trashëgiminë, e cila është e zakonshme për të gjitha atributet e paraqitura në këtë artikull):

• fikse - e bën fotografinë në sfond të palëvizshme;
• rrotull - rrotullat e sfondit së bashku me elementët e tjerë;
• lokal - imazhi në sfond rrotullohet nëse përmbajtja ka lëvizje. Sfondet që shkojnë përtej përmbajtjes kapen.

Shembulli i përdorimit:

trupi (bashkëngjitja e sfondit fikse).

Firefox aktualisht nuk e mbështet pronën e fundit (lokale).

Atributi i origjinës së sfondit

Kjo atribut është përgjegjëse për pozicionimin e elementit. Shfletuesit e vjetër kërkojnë parashtesa. Vetë prona ka tre parametra:

• kuti mbushëse pozicionon sfondin në krahasim me skajin, duke marrë parasysh trashësinë e kornizës;
• kuti kufiri ndryshon nga vetia e mëparshme në atë që vija kufitare mund të mbivendoset plotësisht ose pjesërisht me sfondin;
• kutia e përmbajtjes pozicionon imazhin duke e lidhur atë me përmbajtjen.

Nëse jepen vlera të shumta, shfletuesit mund të reagojnë ndryshe: Firefox dhe Opera pranojnë vetëm opsionin e parë.

Atributi i përsëritjes së sfondit

Në mënyrë tipike, nëse një sfond përcaktohet nga një imazh, ai duhet të përsëritet horizontalisht ose vertikalisht. Për këtë, përdoret atributi i përsëritjes së sfondit. Kështu, sfondi i një blloku CSS i të cilit përmban një veti të tillë mund të ketë një nga disa parametra:

• jo-përsëritje - imazhi shfaqet në faqe në një version të vetëm;
• përsëris - sfondi përsëritet përgjatë boshteve x dhe y;
• përsëris-x - vetëm horizontalisht;
• përsëris-y - vetëm vertikalisht;
• hapësirë - sfondi përsëritet, por nëse hapësira nuk mund të mbushet, atëherë shfaqen boshllëqe midis fotografive;
• rrumbullakët - imazhi shkallëzohet nëse është e pamundur të mbushet e gjithë zona me fotografi të plota.

Një shembull i përdorimit të atributit:

trupi (përsëritje në sfond: përsëritje pa përsëritje) - në mënyrë të ngjashme sfond-përsëritje: përsërit-y.

Në CSS3, është e mundur të vendosni vlera për shumë imazhe duke renditur parametrat e ndarë me presje.

Atributi i klipit sfond

Kjo atribut përcakton sjelljen e sfondit nën kufij (për shembull, në rastin e kufijve të thyer):

• kuti mbushëse - sfondi shfaqet në mënyrë rigoroze brenda bllokut;
• kuti kufiri - imazhi shkon nën korniza;
• kutia e përmbajtjes - fotografia në sfond shfaqet vetëm brenda përmbajtjes.

Shembulli i përdorimit:

trupi (sfondi-klipi: përmbajtja-kutia;).

Chrom dhe Safari kërkojnë parashtesën -webkit-.

Atributet e errësirës dhe filtrit

Atributi i errësirës ju lejon të vendosni transparencën e sfondit - prona CSS do të funksionojë në të gjithë shfletuesit. Vlera është vendosur në intervalin nga 0,0 deri në 1,0 përfshirë. Në këtë rast, mund të vendosni transparencën e sfondit CSS pa një vlerë të plotë: në vend të 0.3, mjafton të shkruani 3:

.bllok (sfond-imazh: url (img.png); errësira: .3;).

Për të vendosur transparencën e sfondit, CSS e së cilës është i përshtatshëm edhe për IE nën versionin 9, përdorni atributin e filtrit:

.bllok (sfond-imazh: url (img.png); filtri: alfa (perde \u003d 30);).

Në këtë rast, vlera e errësirës vendoset në intervalin nga 0 në 100. Vini re se atributi i errësirës ndryshon nga vendosja e errësirës duke përdorur RGBA në trashëgimi: kur përdorni errësirë, jo vetëm sfondi bëhet transparent, por të gjithë elementët brenda bllokut.

Gjithmonë ndiqni statistikat e përdorimit të shfletuesit në CIS dhe të gjitha vendet e tjera. Problemi më i madh i të gjithë dizenjuesve të faqosjes janë versionet e vjetra të IE, ato nuk lejojnë përdorimin e plotë të CSS3. Kur kodoni, mos harroni të përdorni shërbime të veçanta që kontrollojnë nëse shfletuesi juaj mbështet ndonjë veti të CSS. Nëse nuk mund të instaloni versione të vjetra të shfletuesve, gjeni një shërbim që do të kontrollojë funksionimin e faqes në shfletues të ndryshëm në internet.

Sot dua të flas për sfondin transparent të një blloku teksti, si ta bëjmë, dhe çfarë ofron CSS3 për këtë. Para se të kalojmë te rgba dhe hsla, le të shohim shembuj të përdorimit të një sfondi gjysmë transparent për një bllok me tekst, ose më mirë, si arrihet kjo dhe cilat probleme paraqiten. Për demonstrim, ne do të përdorim këtë fotografi, të përpunuar nga ndonjë program java, dhe lidhjen për të cilën, për fat të keq, ishte humbur shumë kohë më parë.

Shikojmë foton më poshtë. Ekziston një sfond grafik mbi të cilin dëshironi të mbivendosni një bllok të tejdukshëm me tekst. Idealisht, duhet të ketë atë që është në figurë nën numrin 2, por nganjëherë mund të shfaqet ajo që është nën numrin 3. Ekziston edhe një defekt, por do ta përmend atë verbalisht pak më poshtë, sepse nuk kishte asnjë mënyrë për të marrë një screenshot të saj.

Sfond i tejdukshëm pa rgba dhe hsla

1. I tejdukshëm PNG ... Opsioni më i mirë, sepse është larg shfletuesi më i kryqëzuar dhe më i thjeshtë. Në mënyrë që blloku të jetë transparent, kërkohet një PNG gjysmë transparente me një pixel, e cila është vendosur si sfondi i bllokut. Dhe kjo eshte e gjitha.
   
   disavantazhet: Kërkohet vetëm një.
2. Transparenca përmes errësirës ... Transparenca e bllokut vendoset në shfletuesin si vijon:

   perde: 0,5;
   filtri: alfa (perde \u003d 50);
   -moz-perde: 0,5;

   ku 0,5 dhe 50 janë 50% transparencë. Por ka një problem. Nëse vendosim bllokun e dëshiruar në një tejdukshmëri të tillë, do të shohim atë opsion të tretë në imazhin e mësipërm - përmbajtja e bllokut gjithashtu do të bëhet e tejdukshme. Sidoqoftë, ekziston një rrugëdalje - pozicionimi falas, me ndihmën e të cilit vendoset një bllok tjetër nën bllokun e tekstit, të cilit i jepet transparenca.

   Le të shohim një shembull. Lëreni bllokun me fotografi portokalli të jetë etiketimi i trupit, ena që përmban si tekstin ashtu edhe sfondin transparent është #block_bg, brenda së cilës blloku me sfond të tejdukshëm është #bllok_transparencë, dhe blloku me tekstin është #bllok_teksti.

   
   

   
   

   Teksti teksti teksti, shumë, shumë teksti

   
   

   trupi (sfondi: url (imazhi.jpg);)
   # bllokoj_bg (
   pozicioni: relativ;
   tejmbushje: e fshehur;
   gjerësia: 400px;
   mbushje: 10px;
   }
   #bllok_tekst (pozicioni: relativ; indeksi z: 100;)
   # bllokoj_transparente (
   perde: 0,5;
   filtri: alfa (perde \u003d 50);
   -moz-perde: 0,5;
   sfondi: #fff;
   pozicioni: absolut;
   maja: 0;
   majtas: 0;
   indeksi z: 90;
   lartësia: 5000px;
   gjerësia: 400px;
   }

   Unë tërheq vëmendjen tuaj për faktin se duhet të vendosni gjerësinë e bllokut transparent (rreshti 19), përndryshe ai do të shembet në 1 piksel dhe gjerësia e bllokut të përgjithshëm (rreshti 5), përndryshe teksti do të shkojë përtej bllokut transparent (megjithëse gjerësia mund të vendoset për tekstin, por nuk ka ndonjë ndryshim thelbësor do të jetë). Për të prerë tekstin dhe skajin e kutisë transparente, përdorni mbushjen në rreshtin e gjashtë. Për ta bërë transparencën të rregullueshme në lartësi, jepini asaj një lartësi më të lartë (rreshti 18) dhe një mbivendosje për bllokun e përgjithshëm (rreshti 4).
   Pra, ne kemi mbushur gjithçka në një bllok, i cili mund të futet në çdo pjesë të faqes ku ka një sfond interesant. Po, ju mund të dëshironi të vendosni një sfond për block_bg të zakonshëm, por është më mirë të mos bëni - ta bëni jetën tuaj më të vështirë (varet, natyrisht, nga detyra). Me fjalë të tjera, është më mirë të mbushni tërë këtë strukturë në një bllok të veçantë, në të cilin mund të vendosni mbushje dhe të mos vuani.
   disavantazhet: Shumë e rëndë.

rgb dhe hsl, rgba dhe hsla - vetitë CSS3

Më saktësisht, këto nuk janë saktësisht veti - kjo është një aftësi e re për të vendosur ngjyra për veti të tilla si sfondi, ngjyra, kufiri, etj.

Emri i pronave erdhi nga sistemet e ngjyrave RGB (Kuqe, Jeshile, Blu) dhe HSL (Hue, Satutation, Lightness). Sistemi i parë përshkruan hapësirën e ngjyrave duke përzier ngjyrat kryesore - të kuqe, jeshile dhe blu. Në sistemin e dytë, përbërësit e ngjyrave shfaqin informacione rreth një ngjyre në një formë më të njohur për njerëzit: Cila është kjo ngjyrë? Sa intensive është? Sa dritë apo errësirë \u200b\u200bështë?

rgb dhe rgba

Le të fillojmë me rgb dhe rgba. Vlerat r, g, b mund të vendosen nga 0 në 255 ose nga 0% në 100%. Vlera a (alfa, transparencë) matet nga 0 në 1 (vlerat thyesore specifikohen përmes një pike - 0.4, 0.7, etj.). Nëse r, g dhe b janë vendosur në vlera që tejkalojnë diapazonin e tyre të vlefshëm (për shembull, 300 ose 110% ose -5), ato do të tkurren në vlerën më të afërt të vlefshme.

Le të shohim pronën e sfondit si një shembull (edhe pse ata që dëshirojnë mund të marrin ngjyrën ose kufirin).

sfondi: rgb (0, 0, 255); / * blu e paster * /
sfondi: rgb (100%, 50%, 0%); / * blu e paster * /
sfondi: rgb (10, 145, 500); / * do të njihet si 10, 145, 255 * /
sfondi: rgba (10, 145, 255, 1); / * njësoj si më parë * /
sfondi: rgba (100, 50, 255, 0.1); / * hije shumë transparente e jargavanit * /

Po, harrova të them se nuk mund të vendosësh një hapësirë \u200b\u200bmidis pronës dhe kllapës së hapjes, dhe nuk mund të vendosësh disa vlera në të njëjtën linjë në numra të zakonshëm, dhe të tjerët në përqindje. Nëse e bëni këtë, asgjë nuk do të funksionojë.

hsl dhe hsla

Dhe disa fjalë për hsl dhe hsla. Vlera e a është vendosur në të njëjtën mënyrë si për rgb dhe rgba, por me tre parametrat e parë, situata është paksa e ndryshme. h varion nga 0 në 360, dhe s dhe l varion nga 0% në 100%.

Dhe gjëja më e rëndësishme. Nëse është shumë e vështirë të përcaktohet ngjyra nga koka në rgb (një program i palëve të treta me një pikues sysh është pothuajse gjithmonë i nevojshëm), atëherë mjafton që të keni një foto para syve tuaj që gjithçka të vijë në vend. Foto tregon hijet e parametrit h.

Për të vlerësuar ngjyrën e kërkuar, zgjidhni një hije, pastaj vlerësoni s, ngopjen e ngjyrës (ku 0% është një ngjyrë e pangopur (hije gri) dhe 100% është ngopja më e madhe) dhe dritën e saj (0% - me të, ngjyra do të jetë gjithmonë e zezë, dhe me 100% - e bardhë). Bazuar në sa më sipër, fotografia tregon tonet në 100% ngopje dhe 50% lehtësi.

Tani e gjithë hapësira e ngjyrave është në kokën tuaj me një shikim. Sigurisht, përzgjedhja manuale nuk zëvendëson një pikëzues të syve dhe jo të gjithë kanë nevojë të kenë një "hapësirë \u200b\u200bme ngjyra" në kokën e tyre, por ndonjëherë, në mënyrë që të kuptoj shpejt se çfarë është e nevojshme dhe provë, i përshtatet.

Dhe vetëm disa shembuj

sfondi: hsl (180, 100%, 50%); / * BLU të thellë * /
sfondi: hsla (140, 50%, 30%, 0.5); / * i tejdukshëm, vështirë se vërehet se hija e gjelbër * /

disavantazhet: të 4 pronat nuk mbështeten nga gomari dhe shfletuesit e vjetër.

Përfundimi

Në përgjithësi, CSS3 ofron gjëra të tjera shumë të dobishme, por si gjithmonë, IE është frenimi kryesor i progresit. Për faqet e klientëve, unë do të përmbahem nga përdorimi i tij tani për tani (ata ende do të durojnë trurin kot) dhe do të marrin opsionin me PNG. Dhe në faqen tuaj të internetit - pse jo. Sidomos nëse vizitohet nga njerëz të përparuar që nuk janë ulur mbi gomarë ose ndonjë fragment të lashtësisë.

Shumë shpesh, ju mund të gjeni një imazh të përshtatshëm në Internet, për shembull, për ta vendosur në një faqe në internet. Ose ndoshta jeni duke bërë një kolazh, dhe duhet të shtoni të tjerët në një vizatim. Por imazhet që ju duhen zakonisht kanë një lloj sfondi.

Le të kuptojmë se si mundeni bëni një sfond transparent për figurën duke përdorur redaktorinAdobePhotoshop... Kam të instaluar një version anglisht të Adobe Photoshop CS5, kështu që do të shfaqem në të.

Do të përpiqem t'ju jap shkurtore të ndryshme të tastierës.

Nëse nuk keni të instaluar ende Photoshop, rrallë e përdorni ose është në anglisht, mund të krijoni një sfond transparent në Paint.net. Ky është një redaktues i thjeshtë i imazheve në gjuhën ruse që do të marrë pak hapësirë \u200b\u200bnë hard diskun tuaj. Duke klikuar në link, mund të lexoni një artikull të hollësishëm. Ju mund ta shkarkoni Paint.net nga faqja jonë e internetit.

Le të fillojmë me një shembull të thjeshtë. Supozoni se keni një imazh në një sfond të thjeshtë, mund të jetë një logo ose një emër për diçka. Le ta bëjmë këtë logo ose mbishkrim në një sfond transparent në Photoshop.

Hapni imazhin e dëshiruar në redaktor. Tani le të bëjmë një sfond transparent për shtresën. Në dritaren "Shtresat", klikoni dy herë në shtresën e shtuar - do të ketë një bllokim përballë saj. Do të hapet dritarja "New Layer", klikoni "OK" në të. Pas kësaj, brava do të zhduket.

Zgjidhni mjetin "Shkopi Magjik". Specifikoni nivelin e ndjeshmërisë në shiritin e pronave, caktoni vlera të ndryshme për të kuptuar se si funksionon, për shembull 20 dhe 100. Për të mos zgjedhur foton, shtypni "Ctrl + D".

Ne vendosim ndjeshmërinë dhe klikojmë me një shkop magjik në zonën e sfondit. Për të shtuar në sfondin e zgjedhur, ato pjesë që nuk janë zgjedhur, mbani të shtypur "Shift" dhe vazhdoni zgjedhjen. Shtypni "Fshi" për të hequr zonat e zgjedhura.

Tani, në vend të sfondit, ekziston një tabelë - kjo do të thotë që ne kemi arritur ta bëjmë sfondin e bardhë transparent. Hiq përzgjedhjen - "Ctrl + D".

Nëse keni një imazh ose një fotografi që ka shumë ngjyra dhe objekte të ndryshme, merrni parasysh se si të krijoni një sfond transparent për një imazh në Photoshop.

Në këtë rast, ne do të përdorim mjetin e Zgjedhjes së Shpejtë. Ne klikojmë në shkopin magjik me butonin e majtë të miut me një vonesë të vogël dhe zgjedhim mjetin e dëshiruar nga menuja.

Tani duhet të zgjedhim objektin që duam ta mbajmë në një sfond transparent. Në shiritin e pronave, vendosni madhësi të ndryshme dhe klikoni në objekt, duke shtuar zona në të. Nëse një sfond i panevojshëm është zgjedhur gabimisht, shtypni "Alt" dhe hiqni atë.

Shtypni "Q" për të parë rezultatin. Pjesët e imazhit që do të bëhen transparente do të theksohen në rozë.

Kopjoni zonat e zgjedhura duke shtypur "Ctrl + C". Tjetra, krijoni një skedar të ri, "Ctrl + N", me një sfond transparent.

Ngjitni fragmentet e kopjuara në të, "Ctrl + V". Nëse kanë mbetur pjesë të padëshiruara të sfondit, hiqni ato duke përdorur mjetin Eraser. Ruani fotografitë e bëra në një sfond transparent në formatin PNG ose GIF.

Bëni sfondin e bardhë të fotos transparente, ose bëjeni sfondin transparent për fragmente individuale të një imazhi me ngjyra ose foto në Photoshop. Pas kësaj, mund t'i përdorni aty ku është e nevojshme: t'i vendosni në faqe, t'i shtoni në një foto tjetër ose të bëni kolazhe interesante.

Transparenca e sfondit të CSS

Transparenca e sfondit në sit krijohet përmes një prone të CSS. Ekzistojnë dy mënyra për të arritur transparencën: përmes pronës së errësirës dhe sfondit: rgba (). Le të shohim secilën prej tyre, dhe pastaj të bëjmë një krahasim.

1. Prona e errësirës CSS për transparencën e sfondit

CSS ka një veti të errësirës me të cilën mund të vendosni transparencën e imazheve, teksteve, përfshirë sfondet.

Transparenca përcaktohet thjesht duke specifikuar një numër real nga 0,0 në 1,0. Sa më i ulët të jetë numri, aq më pak i dukshëm do të jetë objekti.

perde: 0,5; // Perde e tejdukshmerise: 0.2; // Objekti është i dukshëm vetëm në errësirë \u200b\u200b20%: 0.8; // Objekti është i dukshëm vetëm në 80%

Le të shohim një shembull me vetinë e opacity.

Teksti është gjithashtu transparent