Sfondi gjysëm transparent css. Krijimi i një sfondi transparent në HTML dhe CSS (opaciteti dhe efektet RGBA)

Sot dua të flas për sfondin transparent të një blloku teksti, si ta bëjmë atë 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 të tejdukshëm për një bllok me tekst, ose më saktë, si arrihet kjo dhe cilat probleme lindin. Për të demonstruar, ne do të përdorim këtë foto, të përpunuar nga një program java, dhe lidhja për të cilën, për fat të keq, ka humbur shumë kohë më parë.

Shikoni foton më poshtë. Ekziston një sfond grafik në të cilin dëshironi të mbivendosni një bllok të tejdukshëm me tekst. Idealisht, duhet të jetë ajo që është në figurë nën numrin 2, por ndonjëherë mund të ndodhë ajo që është nën numrin 3. Ka edhe një defekt, por do ta përmend me gojë pak më poshtë, sepse Nuk kishte asnjë mënyrë për ta bërë pamjen e ekranit.

Sfondi gjysmë transparent pa rgba dhe hsla

1. PNG i tejdukshëm . Opsioni më i mirë, sepse. ai është deri tani më ndër-shfletuesi dhe më i lehtë. Në mënyrë që blloku të jetë transparent, kërkohet një PNG i tejdukshëm me një piksel, i cili vendoset si sfond i bllokut. Dhe kjo eshte.
   
   disavantazhet: Kërkohet vetëm një.
2. Transparenca nëpërmjet patransparencës . Transparenca e bllokut vendoset ndër-shfletues si më poshtë:

   opaciteti: 0,5;
   filtri:alfa(opacity=50);
   -moz-opacity:0.5;

   ku 0.5 dhe 50 janë 50% transparencë. Por ka një problem. Nëse vendosim bllokun që duhet të kemi një translucencë të tillë, atëherë do të shohim opsionin e tretë në imazhin e mësipërm - përmbajtja e bllokut gjithashtu do të bëhet e tejdukshme. Sidoqoftë, ekziston një rrugëdalje - pozicionimi i lirë, me ndihmën e të cilit vendoset një bllok tjetër nën bllokun e tekstit, në të cilin vendoset tejdukshmëria..

   Konsideroni një shembull. Lëreni bllokun me figurën portokalli të jetë etiketa e trupit, një enë që do të përmbajë tekst dhe sfond transparent - #block_bg, brenda të cilit është një bllok me sfond të tejdukshëm #blloku_transparent dhe një bllok me tekst - #block_text.

   
   

   
   

   Teksti i tekstit, shumë e shumë tekst

   
   

   trupi ( sfondi: url (image.jpg); )
   #blloku_bg(
   pozicioni: i afërm;
   vërshoj: i fshehur;
   gjerësia: 400 px
   mbushje: 10 px
   }
   #block_text (pozicioni: relative; z-indeksi: 100; )
   #blloku_transparent(
   tejdukshmëria: 0.5
   filtri: alfa (opacity=50);
   -moz-opacity: 0.5;
   sfond: #fff;
   pozicioni: absolut;
   krye: 0;
   majtas: 0;
   z-indeksi: 90;
   lartësia: 5000 px;
   gjerësia: 400 px
   }

   Unë tërheq vëmendjen tuaj për faktin se është e nevojshme të vendosni gjerësinë e bllokut transparent (rreshti 19), përndryshe 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 blloku transparent (edhe pse gjerësia mund të vendoset për tekstin, por nuk ka asnjë ndryshim thelbësor do të). Për të pasur dhëmbëza nga teksti dhe skaji i bllokut transparent, ne përdorim mbushjen në rreshtin e gjashtë. Për ta bërë transparencën të rregullueshme në lartësi, i japim një lartësi më të madhe (rreshti 18) dhe një mbivendosje për bllokun e përgjithshëm (rreshti 4).
   Pra, ne futëm gjithçka në një bllok, i cili mund të shtyhet në çdo pjesë të faqes ku ka një sfond interesant. Po, ju mund të dëshironi të vendosni një sfond për bllokun e përbashkët block_bg, por më mirë jo - ta bëni jetën tuaj të vështirë (në varësi, natyrisht, nga detyra). Me fjalë të tjera, është më mirë ta fusni të gjithë këtë strukturë në një bllok të veçantë, në të cilin mund të vendosni mbushjen dhe të mos vuani.
   disavantazhet: Shumë i rëndë.

rgb dhe hsl, rgba dhe hsla janë veti CSS3

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

Emri i vetive vjen nga sistemet e ngjyrave RGB (E kuqe, jeshile, blu) dhe nga 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 informacionin e ngjyrave në një formë më të njohur për njerëzit: Çfarë është kjo ngjyrë? Sa i ngopur është ai? Sa dritë apo errësirë ​​ë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, transparenca) matet nga 0 në 1 (vlerat fraksionale specifikohen përmes një pike - 0.4, 0.7, etj.). Nëse r, g dhe b u jepen vlera që tejkalojnë diapazonin e tyre të lejuar (për shembull, 300 ose 110% ose -5), ato do të tkurren në vlerën më të afërt të lejuar.

Konsideroni gjithçka në shembullin e pronës së sfondit (edhe pse ata që dëshirojnë mund të marrin ngjyrë ose kufi).

sfond: rgb (0, 0, 255); /*blu e pastër*/
sfond: rgb (100%, 50%, 0%); /*blu e pastër*/
sfond: rgb (10, 145, 500); /*do të njihet si 10, 145, 255*/
sfond: rgba (10, 145, 255, 1); /*njejte si me siper*/
sfond: rgba (100, 50, 255, 0.1); /* nuancë shumë transparente e jargavanit*/

Po, harrova të them se nuk mund të vendosni një hapësirë ​​midis pronës dhe kllapës hapëse dhe nuk mund të vendosni disa vlera në numra të zakonshëm në një rresht, dhe të tjera si 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 vendoset në të njëjtën mënyrë si për rgb dhe rgba, por tre parametrat e parë janë paksa të ndryshëm. h është vendosur nga 0 në 360, dhe s dhe l janë vendosur nga 0% në 100%.

Dhe gjëja më e rëndësishme. Nëse në rgb është shumë e vështirë të përcaktohet ngjyra nga koka (është pothuajse gjithmonë e nevojshme program i palës së tretë me një “pipetë”), atëherë mjafton të kesh një foto para syve që gjithçka të bjerë në vend. Fotografia tregon nuancat e parametrit h.

Për të vlerësuar ngjyrën e dëshiruar, zgjidhni një nuancë, më pas vlerësoni s, ngopjen e ngjyrave (ku 0% është një ngjyrë e pangopur (shkallë gri), dhe 100% është ngopja më e madhe) dhe butësia e saj (0% - me të, ngjyra gjithmonë do të të jetë e zezë, dhe me 100% - e bardhë). Bazuar në sa më sipër, fotografia tregon tone të lehta me ngopje 100% dhe lehtësi 50%.

Tani e gjithë hapësira e ngjyrave është në kokën time me një shikim. Natyrisht, zgjedhja manuale nuk zëvendëson një pikatore për sy dhe jo të gjithë duhet të kenë një "hapësirë ​​ngjyrash" në kokën e tyre, por ndonjëherë, për të kuptuar shpejt se çfarë nevojitet dhe për ta provuar atë, ajo përshtatet.

Dhe vetëm disa shembuj

sfond: hsl (180, 100%, 50%); /*ngjyrë blu e pasur*/
sfond: hsla (140, 50%, 30%, 0.5); /*e tejdukshme, mezi e dallueshme se nuanca e jeshiles*/

disavantazhet: të 4 pronat nuk mbështeten nga gomarët dhe shfletuesit më të vjetër.

Përfundimi

Në përgjithësi, CSS3 ofron një tjetër gjë shumë të dobishme, por si gjithmonë, IE është frena kryesore e progresit. Për faqet e klientëve, për momentin do të përmbahesha nga përdorimi (gjithsesi do të nxjerrin trurin kot) dhe do të merrja opsionin me PNG. Dhe në faqen tuaj - pse jo. Sidomos nëse vizitohet nga njerëz të përparuar që nuk ulen mbi gomarë apo ndonjë fragment të lashtësisë.

Me ardhjen e CSS3, puna e projektuesve të paraqitjes është bërë shumë më e thjeshtë dhe më logjike: në fund të fundit, tani mund të konfiguroni me të vërtetë në mënyrë fleksibël çdo objekt, duke iu drejtuar JavaScript gjithnjë e më pak. Le të themi se duhet të rregulloni transparencën e sfondit - CSS ofron menjëherë disa opsione.

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

atribut i ngjyrës së sfondit

Edhe IE8 e mbështet këtë metodë. Disa imazhe si sfond përdoren në paraqitjen fluide. Më e rëndësishmja, mos harroni, kur përdorni ndonjë imazh, vendosni gjithashtu ngjyra css sfond, pasi përdoruesit thjesht mund të mos e ngarkojnë foton.

atribut background-position

Nëse përdorni 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 tregues verbalë (lart, poshtë, majtas, djathtas) ose tregues numerik (përqindje, pikselë dhe njësi të tjera matëse). Në këtë rast, duhet të specifikoni dy vlera: horizontalisht dhe vertikalisht:

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

atribut i madhësisë së sfondit

Ndonjëherë kërkohet me duke përdorur CSS shtrini sfondin ose zvogëloni madhësinë e tij. 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ë pikselë ose në përqindje, ashtu edhe në çdo njësi tjetër matëse.

Ka disa probleme me këtë atribut: për të shfaqur saktë sfondin në versionet e mëparshme të shfletuesve, duhet të përdoren prefikset. Sigurisht, versionet aktuale mbështesin plotësisht këtë atribut dhe nuk ka nevojë për veçori specifike.

atribut background-attachment

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

• fikse- e bën figurën në sfond të palëvizshëm;
• rrotulloni- sfondi rrotullohet së bashku me pjesën tjetër të elementeve;
• lokal- imazhi në sfond lëviz nëse përmbajtja ka lëvizje. Sfondi që shkon përtej përmbajtjes është i rregulluar.

Shembull përdorimi:

trupi (sfondi-lidhja e fiksuar).

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

atribut sfond-origjina

Ky atribut është përgjegjës për pozicionimin e elementit. Shfletuesit versionet e hershme kërkojnë përdorimin e parashtesave. Vetë prona ka tre parametra:

• kuti mbushjeje pozicionon sfondin në lidhje me skajin, duke marrë parasysh trashësinë e kornizës;
• kuti-kufi ndryshon nga vetia e mëparshme në atë që vija kufitare mund të mbivendos plotësisht ose pjesërisht sfondin;
• kutia e përmbajtjes pozicionon imazhin, duke e ankoruar në përmbajtje.

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

atributi i përsëritjes së sfondit

Në përgjithësi, nëse sfondi është vendosur në një imazh, ai duhet të përsëritet horizontalisht ose vertikalisht. Për këtë shërben atributi i përsëritjes së sfondit. Për shembull, sfondi i një blloku CSS i të cilit përmban një pronë të tillë mund të ketë një nga disa opsione:

• mos përsëritje- imazhi shfaqet në faqe në një version të vetëm;
• përsëritni- sfondi përsëritet përgjatë boshteve x dhe y;
• përsëritni x- vetëm horizontalisht;
• përsërit-y- vetëm vertikalisht;
• hapësirë- sfondi përsëritet, por nëse hapësira nuk mund të plotësohet, atëherë shfaqen boshllëqe midis fotografive;
• rrumbullakët- imazhi është i shkallëzuar nëse nuk është e mundur të mbushet e gjithë zona me fotografi të tëra.

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ërit: përsërit-y.

Në CSS3, është e mundur të vendosni vlera për imazhe të shumta duke renditur opsionet e ndara me presje.

atribut sfond-clip

Ky atribut përcakton sjelljen e sfondit nën kufijtë (për shembull, në rastin e kufijve të ndërprerë):

• kuti mbushjeje- sfondi shfaqet rreptësisht brenda bllokut;
• kuti-kufi- imazhi shkon nën kornizë;
• kutia e përmbajtjes— fotografia në sfond shfaqet vetëm brenda përmbajtjes.

Shembull përdorimi:

trupi (background-clip: përmbajtje-kuti;).

Chrom dhe Safari kërkojnë përdorimin e prefiksit -webkit-.

opaciteti dhe atributet e filtrit

Atributi opacity ju lejon të vendosni transparencën e sfondit - vetia CSS do të funksionojë në të gjithë shfletuesit. Vlera është vendosur midis 0.0 dhe 1.0 përfshirëse. Në këtë rast, mund të vendosni transparencën e sfondit CSS pa një vlerë të plotë: në vend të 0.3, thjesht shkruani .3:

.blloku (background-image: url(img.png); opacity: .3;).

Për të vendosur transparencën e sfondit, CSS e së cilës është e përshtatshme edhe për IE nën versionin e nëntë, përdorni atributin e filtrit:

.blloku (imazhi i sfondit: url(img.png); filtri: alfa (opacity=30);).

Në këtë rast, vlera e opacitetit vendoset në rangun nga 0 deri në 100. Vini re se atributi i opacitetit ndryshon nga cilësimi i transparencës duke përdorur RGBA sipas trashëgimisë: kur përdoret opaciteti, jo vetëm sfondi bëhet transparent, por edhe të gjithë elementët brenda bllokut. .

Mbani gjithmonë një sy në statistikat e përdorimit të shfletuesit për CIS dhe të gjitha vendet e tjera. Problemi më i madh për të gjithë dizajnerët e paraqitjes janë versionet e vjetra të IE, ato nuk ju lejojnë të përdorni CSS3 plotësisht. Kur vendosni, mos harroni të përdorni shërbime speciale që kontrollojnë nëse shfletuesi juaj mbështet ndonjë pronë CSS. Nëse nuk mund të instaloni versione të vjetra të shfletuesve, gjeni një shërbim që do të kontrollojë sitin shfletues të ndryshëm online.

Një detyrë

Bëni një element blloku me të gjithë përmbajtjen e tij të tejdukshëm.

Zgjidhje

Për të ndryshuar shkallën e transparencës së një elementi, përdoret vetia e stilit opacity me një vlerë nga 0 në 1, ku 0 korrespondon me transparencën e plotë dhe 1, përkundrazi, me opacitetin e objektit. NË Shfletuesi i internetit Eksploroni këtë veti nuk funksionon, kështu që ju duhet të përdorni filtrin posaçërisht për të, një veti që nuk është pjesë e specifikimit CSS. Shembulli 1 tregon se si të vendosni transparencën e një shtrese për të gjithë shfletuesit.

Shembull 1. Shtresë gjysmë transparente

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rezultati ky shembull treguar në fig. një.

Oriz. 1. Shtresë gjysmë transparente në Shfletuesi Safari

Vetia e filtrit shton transparencë vetëm për ata elementë ku të paktën një nga madhësitë (gjerësia ose lartësia) është vendosur ose elementi është vendosur në pozicionim absolut (pozicioni : absolute).

Vini re gjithashtu se transparenca ndikon në të gjitha përmbajtjet e shtresës, duke përfshirë elementët fëmijë, dhe nuk do të jeni në gjendje të rrisni nivelin e patejdukshmërisë për ta duke ndryshuar patejdukshmërinë. Në shembullin 1, ku transparenca e shtresës është vendosur në 0.7, teksti brenda shtresës merr të njëjtën vlerë. Lejohet të vendoset më pak, por teksti nuk mund të kalojë vlerën e transparencës prej 0.7.

Efekti i tejdukshmërisë së elementit është qartë i dukshëm në imazhin e sfondit dhe është bërë i përhapur në të ndryshme sistemet operative sepse duket me stil dhe bukur. Në dizajnin e uebit, tejdukshmëria përdoret gjithashtu dhe arrihet përmes veçorisë së opacitetit ose formatit të ngjyrave RGBA që është vendosur për sfondin.

vetia e tejdukshmërisë

Tipari kryesor i kësaj veçorie është se vlera e transparencës prek të gjithë elementët fëmijë brenda, jo vetëm sfondin. Kjo do të thotë që si sfondi ashtu edhe teksti do të bëhen të tejdukshëm dhe nuk do të funksionojë për të rritur nivelin e transparencës duke shtuar . Në tabelë. 1 tregon pamjen e tekstit dhe sfondit me vlera të ndryshme opaciteti.

Shembulli 1 tregon se si të krijoni një kuti të tejdukshme duke përdorur opacity.

Shembulli 1: Sfondi në një faqe interneti

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

Zakonisht, sipas dizajnit, vetëm sfondi i elementit duhet të jetë i tejdukshëm dhe teksti duhet të jetë i errët për të ruajtur lexueshmërinë e tij. Vetia e opacitetit nuk përshtatet këtu sepse teksti brenda elementit do të jetë gjithashtu pjesërisht transparent. Është mirë të përdoret formati RGBA, pjesë e të cilit është kanali alfa, ose me fjalë të tjera vlera e transparencës. Vlera shkruhet rgba, më pas vlerat e përbërësve të kuq, blu dhe jeshil të ngjyrës renditen në kllapa të ndara me presje. E fundit vjen transparenca, e cila vendoset nga 0 në 1 (Fig. 1), ndërsa 0 do të thotë transparencë e plotë dhe 1 do të thotë patransparencë e ngjyrës.

Oriz. 1. Sintaksa e përdorimit të rgba

Shembulli 2 tregon përdorimin e formatit RGBA për të krijuar një sfond të tejdukshëm.

Shembulli 2: Sfondi gjysmë transparent

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 2. Vlera e opacitetit për sfondin është vendosur në 90%.

Oriz. 2. Sfondi gjysmë transparent dhe tekst i errët

Në CSS, ekzistojnë tre mënyra për të ndryshuar transparencën e një elementi:
duke përdorur vetinë e opacitetit,
duke përdorur funksionin rgba(),
duke përdorur funksionin hsla().

1. Vetia e opacitetit

Vetia opacity ju lejon të bëni pjesërisht ose plotësisht transparent çdo element të një faqe interneti. Kjo veti ndryshon transparencën e elementeve që kanë një imazh të sfondit (foto) ose një grup sfondi duke përdorur një ngjyrë ose gradient. Nëse elementi që ka vetinë e opacitetit të aplikuar ka elementë të tjerë brenda tij, ata gjithashtu do të ndryshojnë opacitetin e tyre.
Vetia e opacitetit merr vlera midis 0 (plotësisht transparente) dhe 1 (e errët), për shembull:

H1 (ngjyra: #CD6829;) div ( sfondi: #CDD6DB; errësirë: .3; )
Oriz. 1. Transparenca e elementeve duke përdorur opacitetin

2. Funksioni RGB().

Modeli i ngjyrave RGBA krijon një nuancë ngjyrash duke përzier në përmasat e kërkuara. e kuqe, jeshile Dhe blu lule, dhe kanal alfa (alfa)është përgjegjës për shkallën e transparencës së ngjyrës. Ndryshe nga vetia opacity, për një kuti që përmban elementë të tjerë, funksioni rgba() do të ndryshojë vetëm opacitetin e kutisë.

3. funksioni hsl().

Funksioni hsla() parametrat e të cilit nënkuptojnë ton (ngjyrë), Ngopja, ndriçimi Dhe kanal alfa (alfa), ju lejon gjithashtu të vendosni një ngjyrë të tejdukshme.

Ngjyrosjet e ngjyrave përcaktohen si përqindje duke përdorur vlerën përkatëse nga rrota e ngjyrave. Rrethi në vetvete është i ndarë në sektorë, në kufijtë e të cilëve ka ngjyra kryesore:

0/360° - e kuqe
60° - e verdhë
120° - jeshile
180° - blu
240° - blu
270° - vjollcë
300° magenta.