Baro CSS3 Opacity

Sameynta Aasaasigaaga Guud

Mid ka mid ah waxyaabaha aad si sahlan u samayn karto naqshadda daabacaadda laakiin aaney ku jirin Webka waa qoraalka ku dul qoran sawirka ama asalka midabada, iyo bedelida daahfurnaanta sawirka si markaas qoraalka uu u noqdo asalka. Laakiin waxaa jira hanti CSS3 ah oo kuu ogolaanaya inaad bedesho xakameynta waxyaabaha aad leedahay si ay u fuushaan gudaha iyo dibadda.

Sida loo Isticmaalo Hantidhawrka Opacity

Hantidhawrka dhismaha wuxuu qiime ka dhigaa caddadka caddaynta laga bilaabo 0.0 ilaa 1.0.

0.0 waa 100% sheyga-wax kasta oo ka hooseeya cutubkaas ayaa si buuxda u muujin doona. 1.0 waa boqolkiiba 100% oo aan waxba ka hooseynin qodobka ayaa muujin doona.

Markaa si aad u sameysid sheyga 50% oo hufan, waxaad qori laheyd:

Opacity: 0.5;

Fiiri tusaalooyinka qaar ka mid ah ficillada ficilka

U hubso inaad tijaabiso daaqadaha waaweyn

Midkoodna IE 6 ama 7 ma taageerayo hantida hantida CSS3. Laakiin maaha inaad ka baxdo nasiib. Taa baddalkeeda, IE wuxuu taageersan yahay qalabka Microsoft alfa oo keliya filter. Alpha Filters in IE aqbalo qiimaha laga bilaabo 0 (gebi ahaanba daahfuran) ilaa 100 (gebi ahaanba la isku haysto). Marka, si aad u hesho daahfurnaantaada IE, waa inaad ku dhufatid ikhtiyaaradaada 100 adigoo ku dar fiilada alfa ah qaababkaaga:

filter: alpha (opacity = 50);

Eeg fiilka alfa ee ficilka (IE kaliya)

Isticmaal Prefixerada Browser

Waa inaad isticmaashaa -mose- iyo -webkit-horgalayaasha hor-u-marin si ay u noqdaan kuwa ugu da 'weyn ee Muuqaalka Mozilla iyo Webkit ay sidoo kale taageeraan:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
Opacity: 0.5;

Had iyo jeer ku dheji hor-u-marin horjooge ah, iyo hantida CSS3 ee ugu dambeysa.

Tijaabi horgalaha google-yada ah ee Mozilla iyo daaqadaha Webkit.

Waxaad samayn kartaa Sawirro Dheeraad ah

Hoos u samee muuqaalka sawirka laftiisa, isla markaana wuxuu ku soo rogi doonaa asalka. Tani waxay runtii faa'iido u tahay sawirrada asalka ah .

Iyo haddii aad ku dartid tagsi aad ku dhejisid waxaad abuuri kartaa saameynta hover kaliya adoo badalaya muuqaalka sawirka.

a: hover img {
filter: alpha (opacity = 50)
shaandhaynta: Diyaarinta: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
Opacity: 0.5;
}

Wuxuu saameeyaa HTML this:

Tijaabi qaababka kor ku xusan iyo HTML ficilka.

Ku qor qoraalka ku sawiran

Iyada oo la adeegsan karo, waxaad ku dhigi kartaa qoraalka sawir muuqaal ah oo sawir muuqaal ah u muuqda inuu meesha ka baxo meesha qoraalkaasi yahay.

Farsamadani waa wax aad u yar, sababtoo ah ma sahlani kartid sawirka, sidaasi waxay u noqon doontaa sawirka oo dhan. Oo ma yeeli kartid sanduuqa qoraalka , sababtoo ah qoraalka ayaa halkaa ku xigi doona.

1. Marka hore waxaad abuuri kartaa weel DIV ah oo ku dhig muuqaalkaaga gudaha:

   
   

2. Raac sawirka leh DIV-faaruq ah - waa waxa aad samayn doonto hufan.

   
   
   

3. Waxyaabaha ugu dambeeyay ee aad ku dareysid HTML waa DIV qoraalkaaga:

   
   
   
   Tani waa eeyga Shasta. Sow isagu ma cesho!

4. Waxaad ku dhejineysaa meelaynta CSS, si aad u dhigto qoraalka kor ku xusan sawirka. Waxaan qoraalka ku dhigay dhinaca bidixda, laakiin waxaad ku dhejin kartaa midigta adoo bedelaya labadii bidix: 0; guryaha si sax ah: 0; .

   #image {
   Goob: qaraabo;
   width: 170px;
   dhererka: 128px;
   margin: 0;
   }
   #text {
   Goobta: gebi ahaanba;
   top: 0;
   bidix: 0;
   width: 60px;
   dhererka: 118px;
   asalka: #fff;
   dhererka: 5px;
   }
   #text {
   filter: alpha (opacity = 70);
   shaandhaynta: Diyaarinta: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   Opacity: 0.7;
   }
   # erayada {
   Goobta: gebi ahaanba;
   top: 0;
   bidix: 0;
   width: 60px;
   dhererka: 118px;
   asalka ah: hufan;
   dhererka: 5px;
   }

Eeg sida ay u muuqato