Te Hanga i to Papamuri Whakaatu
Ko tetahi o nga mea ka taea e koe te mahi i roto i te hoahoa paerewa, engari kaore i runga i te Tukutuku kei te whakakore i nga kuputuhi ki runga i te ahua me te papanga tae, me te whakarereke i te ahua o taua kii kia ngaro te kuputuhi ki te papamuri. Engari he taonga kei roto i te CSS3 ka tuku ia koe ki te huri i te kaha o nga mea ka taea e koe te whakarereke i roto i waho: opacity.
Me pehea te Whakamahia te Uara Opacity
Ko te taonga opacity he utu o te nui o te whakawhitiwhiti mai i te 0.0 ki te 1.0.
Ko te 0.0 he 100% te marama-tetahi mea kei raro nei ka whakaatuhia te huānga. 1.0 ko te 100% ohorere-kahore i raro i te huānga ka whakaatu mai.
Na kia tuhia he huanga ki te 50% te marama, ka tuhi koe:
opacity: 0.5;
Tirohia etahi tauira o te kaha o te mahi
Kia mohio ki te whakamatautau i nga Pūtirotiro Tawhito
Kaore hoki te IE 6, 7 ranei e tautoko i te taonga opacity CSS3. Engari kaore koe i te waimarie. Engari, ko te IE e tautoko ana i te taakapa taarata a-hua o Microsoft-anake. Ko te peita a Alpha i roto i te IE ka whakaaetia nga uara mai i te 0 (tino marama) ki te 100 (tino opa). Na, ki te whai i to meatau i roto i te IE, me whakanui koe i to opacity i te 100 me te tāpiri i te taitapa taarata ki o raatau momo:
tātari: alpha (opacity = 50);
Tirohia te taitapa i roto i te mahi (IE anake)
Me Whakamahia nga Taewhakarotiro Pūtirotiro
Me whakamahi koe i nga -moz-and -webkit-prefixes kia taea ai e nga momo tawhito o Mozilla me Pūtirotiro Tukutuku te tautoko hoki:
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
Whakaurua i nga waahi tuatahi o te pūtirotiro, me te taonga CSS3 whaimana.
Whakamātautauhia nga paanga o te pūtirotiro i nga pakeke o Mozilla me nga Pūtirotiro Tukutuku.
Ka taea e koe te Hanga Mahere Whakaahua
Tautuhia te opacity i runga i te ahua ake, a, ka ngaro te papa. He tino whai hua tenei mo nga whakaahua papamuri .
A, ki te tapiritia e koe ki te tūtohu punga, ka taea e koe te waihanga i nga paanga o te pakaru ka huri noa i te kaha o te ahua.
a: hover img {
tātari: alpha (opacity = 50)
tātari: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
}
Ka pa ki tenei HTML:
Whakamātautauhia nga momo o runga me te HTML i roto i te mahi.
Hoatuhia te Kuputuhi ki runga i ou Images
Ma te opacity, ka taea e koe te tuhi kuputuhi ki runga i tetahi ahua ka puta te ahua ki te ngaro i te wahi kei reira te kuputuhi.
He iti noa tenei tikanga, no te mea e kore e taea e koe te whakakore i te whakapakoko, ka ngaro te ahua katoa. A e kore e taea e koe te whakaheke i te pouaka kuputuhi , no te mea ka ngaro ano te kuputuhi ki reira.
- Tuatahi ka hanga e koe he pouaka DIV ka tuhia to ahua ki roto:
- A pee i te ahua me te RIV kore noa-koinei te mea ka tino marama.
- Ko te mea whakamutunga e tapiritia ana e koe i roto i to HTML ko te DIV me to kuputuhi kei reira:
Ko taku kuriki tenei. Ehara ianei ia i te mea ataahua! - Kei te tautuhi koe ki te whakatakotoranga CSS, hei tuhi i te tuhinga i runga ake i te ahua. I hoatu e au taku kuputuhi ki te taha maui, engari ka taea e koe te whakauru ki te taha matau ma te huri i te taha maui: 0; nga āhuatanga ki te tika: 0; .
#image {
tūranga: whanaunga;
whanui: 170px;
teitei: 128px;
tapaina: 0;
}
#text {
tūranga: tino;
runga: 0;
maui: 0;
whanui: 60px;
teitei: 118px;
Tuhinga: #fff;
te taraiwa: 5px;
}
#text {
tātari: alpha (opacity = 70);
tātari: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity: 0.70;
opacity: 0.7;
}
#words {
tūranga: tino;
runga: 0;
maui: 0;
whanui: 60px;
teitei: 118px;
whakamārama: te marama;
te taraiwa: 5px;
}
Tirohia te pehea o te titiro