Ṣiṣe ṣiṣiri rẹ ti ita
Ọkan ninu awọn ohun ti o le ṣe ni rọọrun ni apẹrẹ oniru ṣugbọn kii ṣe lori oju-iwe ayelujara jẹ ọrọ ti o kọja lori aworan tabi awọ awọ, ki o si yi iyipada ti aworan naa pada ki ọrọ naa ba lọ si abẹlẹ. Ṣugbọn nibẹ ni ohun-ini kan ni CSS3 ti yoo gba ọ laye lati yi opacity ti awọn eroja rẹ pada ki wọn ki o lọ si ati jade: opacity.
Bi o ṣe le lo Ohun-ini Opacity
Ohun ini opacity jẹ iye ti iye akoyawo lati iwọn 0.0 si 1.0.
0.0 jẹ irisi 100%-ohunkohun ti o wa ni isalẹ yii yoo han patapata. 1.0 jẹ 100% oṣuwọn-ohunkohun ti o wa labẹ isale yoo han nipasẹ.
Nitorina lati ṣeto ipin si 50% sipo, iwọ yoo kọwe:
opacity: 0.5;
Wo awọn apẹẹrẹ ti opacity ni igbese
Daju lati danwo ninu Awọn Iwadi Agbalagba
Bẹni IE 6 tabi 7 ṣe atilẹyin ohun elo Cash3 opacity. Ṣugbọn iwọ ko jade ninu orire. Dipo, IE n ṣe atilẹyin ohun-elo ti Alpha-Alpha nikan. Alpha filters ni IE gba awọn nọmba lati 0 (patapata transparent) si 100 (patapata opa). Nitorina, lati gba iyẹnumọ rẹ ninu IE, o yẹ ki o se isodipupo opacity rẹ nipasẹ 100 ki o si fi ohun-elo Alpha ṣiṣẹ si awọn aza rẹ:
àlẹmọ: alpha (opacity = 50);
Wo awọn àlẹmọ alpha ni igbese (IE nikan)
Ki o si Lo awọn Prefixes Kiri
O yẹ ki o lo awọn -moz- ati -webkit-prefixes ki awọn ẹya agbalagba ti Mozilla ati awọn aṣàwákiri Ayelujara wa ṣe atilẹyin fun o ju:
-iwitiwia-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
Fi awọn prefixes burausa akọkọ, ati awọn ẹtọ CSS3 ti o gbẹyin.
Ṣayẹwo awọn prefixes aṣàwákiri ni agbalagba Mozilla ati awọn aṣàwákiri Ayelujara.
O le Ṣe Awọn aworan Sihin Too
Ṣeto ipo opacity lori aworan ara rẹ ati pe yoo pari si abẹlẹ. Eyi wulo fun awọn aworan lẹhin .
Ati pe ti o ba fikun-un ni tag idigọpọ o le ṣẹda awọn ipabajẹ nikan nipa yiyipada opacity ti aworan naa.
a: hover img {
àlẹmọ: alpha (opacity = 50)
àlẹmọ: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-iwitiwia-opacity: 0.5;
opacity: 0.5;
}
N ni ipa lori HTML yii:
Ṣayẹwo awọn aza ti o wa loke ati HTML ni igbese.
Fi Text si Awọn Aworan rẹ
Pẹlú opacity, o le gbe ọrọ si ori aworan kan ki o ni aworan naa yoo han si ibi ti ọrọ naa jẹ.
Ilana yii jẹ ẹtan diẹ, nitori pe o ko le fọ awọ naa kuro, nitori eyi yoo pa gbogbo aworan rẹ. Ati pe o ko le fọwọsi apoti ọrọ , nitori ọrọ naa yoo tun fẹrẹlẹ nibẹ.
- Ni akọkọ o ṣẹda ibudo DIV ati ki o gbe aworan rẹ sinu:
- Tẹle aworan naa pẹlu DIV ofofo -this jẹ ohun ti o yoo ṣe ṣe itumọ.
- Ohun ikẹhin ti o fi kun ninu HTML rẹ jẹ DIV pẹlu ọrọ rẹ ninu rẹ:
Eyi ni aja mi Shasta. Ṣe ko dara julọ! - O ṣe ara rẹ pẹlu ipo CSS, lati fi ọrọ naa si ori aworan naa. Mo fi ọrọ mi si apa osi, ṣugbọn o le fi si apa otun nipa yiyipada apa osi: 0; ohun-ini si ọtun: 0; .
#image {
ipo: ojulumo;
iwọn: 170px;
iga: 128px;
ala: 0;
}
#text {
ipo: idi;
oke: 0;
sosi: 0;
iwọn: 60px;
iga: 118px;
lẹhin: #fff;
padding: 5px;
}
#text {
àlẹmọ: alpha (opacity = 70);
àlẹmọ: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity: 0.70;
opacity: 0.7;
}
#words {
ipo: idi;
oke: 0;
sosi: 0;
iwọn: 60px;
iga: 118px;
lẹhin: transparent;
padding: 5px;
}
Wo bi o ti n wo