Manao sary vetaveta
Ny iray amin'ireo zavatra izay azonao atao amin'ny fanontana printy fa tsy ao amin'ny tranonkala dia mametaka tononkalo amin'ny sary na sary miloko ary manova ny mangarahara amin'io sary io mba hahafahan'ilay lahatsoratra manoloana ny sary. Saingy misy fananana iray ao amin'ny CSS3 izay ahafahanao manova ny endriky ny elanelanao mba hahafahan'izy ireo miditra sy mivoaka: opacity.
Ahoana no fomba ampiasana ny fananan'ny fahavalo?
Manan-danja ny haben'ny mangarahara avy amin'ny 0.0 ka hatramin'ny 1.0 ny properties opacity.
Ny 0.0% dia mangarahara 100% - ny zavatra rehetra eto ambany dia ho hita amin'ny endriny tanteraka. 1.0 dia 100% opaque-tsy misy eo ambanin'ny singa dia aseho amin'ny alalan'ny.
Koa hametraka singa iray ho an'ny 50% mangarahara ianao dia manoratra hoe:
Hatevin'ny: 0,5;
Jereo ireo ohatra sasantsasany momba ny tsy fahampian'ny asa
Mahaiza mandini-tena amin'ny alàlan'ny navigateur
Na ny IE 6 na 7 dia tsy manohana ny fananganana CSS3. Nefa tsy azonao an-kafaliana. Fa kosa, IE dia manohana ny filahanana alpha tokana. Ny solosaina Alpha ao amin'ny IE dia manaiky sanda 0 (tanteraka tanteraka) hatramin'ny 100 (tanteraka tsy misy). Noho izany, mba hahazoana ny mangarahara ao amin'ny IE, dia tokony hampitombo ny fahafoizanao amin'ny 100 ianao ary hampidirina filtre alpha amin'ny fombanao:
filtre: alpha (opacity = 50);
Jereo ny sivana alpha amin'ny hetsika (IE ihany)
Ary ampiasao ny safidin'ny tranokala
Tokony hampiasa ny prefixes -moz- sy -webkit- ianao mba hahafahan'ny tranokala maoderin'ny tranonkala Mozilla sy Webkit manohana izany:
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
Alaharo aloha ny prefixes amin'ny browser, ary farany ny property CSS3.
Mijoroa amin'ny fisehoan-tsarimihetsika ao amin'ny tranokala Mozilla sy Webkit.
Azonao atao ny manao sary manjavozavo
Apetraho amin'ny endriny ny endrike ary dia hianjera ao ambadik'izany. Tena ilaina tokoa ny maka sary .
Ary raha ampidirinao amina fehezan-kavina ianao dia afaka mamorona ny fiasan-drizareo raha vao manova ny endrik'ilay sary.
a: hover img {
filtre: alpha (opacity = 50)
filtre: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
Hatevin'ny: 0,5;
}
Misy fiantraikany amin'ity HTML ity:
Fantaro ireo endrika etsy ambony sy HTML eo amin'ny asa.
Apetraho eo amin'ny sary ireo lahatsoratra
Miaraka amin'ny tsy fahampian-tsakafo, afaka mametraka lahatsoratra amin'ny sary ianao ary miseho ny sarin'ilay sarimihetsika.
Ity teknika ity dia somary sarotra, satria tsy azonao atao ny mamafa ny sary fotsiny, satria tsy ho lasa ny sary rehetra. Ary tsy azonao afenina ny boaty , satria ny lahatsoratra dia hanjavona ao koa.
- Voalohany dia mamorona kaontenera DIV ianao ary mametraka ny sarinao:
- Araho ny sary miaraka amin'ny DIV iray tsy misy dikany - ity dia ho ataonao mangarahara.
- Ny zavatra farany ampidirinao ao amin'ny HTML anao dia ny DIV miaraka amin'ny lahatsoratrao ao anatiny:
Ity no alako alako Shasta. Tsy mahafatifaty ve izy? - Manamboatra azy miaraka amin'ny toerana misy ny CSS ianao, mametraka ny lahatsoratra eo ambonin'ny sary. Nametraka ny soratra eo amin'ny ilany havia aho, saingy azonao atao ny mametraka azy eo ankavanana amin'ny fanovana ny ankavia roa: 0; trano havanana: 0; .
#image {
toerana: havana;
sakany: 170px;
hahavony: 128px;
sisiny: 0;
}
#text {
toerana: tanteraka;
ambony: 0;
ankavia: 0;
sakany: 60px;
hahavony: 118px;
andamosina: #fff;
padding: 5px;
}
#text {
filtre: alpha (opacity = 70);
filtre: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity: 0,70;
Hatevin'ny: 0,7;
}
#words {
toerana: tanteraka;
ambony: 0;
ankavia: 0;
sakany: 60px;
hahavony: 118px;
andamosina: mangarahara;
padding: 5px;
}
Jereo ny fomba fijeriny