Gwneud Eich Cefndiroedd Yn Dryloyw
Un o'r pethau y gallwch chi eu gwneud yn rhwydd mewn dylunio print ond nid ar y We yw gorchuddio testun ar ddelwedd neu gefndir lliw, a newid tryloywder y ddelwedd honno fel bod y testun yn ymestyn i'r cefndir. Ond mae yna eiddo yn CSS3 a fydd yn caniatáu ichi newid cymhlethdod eich elfennau fel eu bod yn diflannu yn ôl ac allan: amharodrwydd.
Sut i Ddefnyddio Eiddo Prin
Mae'r eiddo cymhleth yn cymryd gwerth y tryloywder o 0.0 i 1.0.
Mae 0.0 yn 100% yn dryloyw - bydd unrhyw beth islaw'r elfen honno'n dangos yn llwyr. 1.0 yn 100% anhysbys-dim islaw'r elfen yn dangos trwy.
Felly, i osod elfen i 50% yn dryloyw, byddech yn ysgrifennu:
didwylledd: 0.5;
Gwelwch rai enghreifftiau o amwysedd wrth weithredu
Byddwch yn sicr i brofi mewn Porwyr Hŷn
Nid yw IE 6 na 7 yn cefnogi eiddo cymhlethdod CSS3. Ond nid ydych chi o lwc. Yn lle hynny, mae IE yn cefnogi hidlydd alffa eiddo Microsoft-unig. Mae hidlwyr Alpha yn IE yn derbyn gwerthoedd o 0 (yn hollol dryloyw) i 100 (yn gwbl aneglur). Felly, er mwyn cael eich tryloywder yn IE, dylech chi luosi eich cymhlethdod o 100 a ychwanegu hidlydd alffa i'ch arddulliau:
hidlo: alffa (opacity = 50);
Gweler yr hidlydd alffa ar waith (IE yn unig)
A Defnyddio Safbwyntiau Porwr
Dylech ddefnyddio'r rhagosodiadau -moz- and -webkit- fel bod fersiynau hŷn o borwyr Mozilla a Webkit yn ei gefnogi hefyd:
-wisg-opasrwydd: 0.5;
-moz-opacity: 0.5;
didwylledd: 0.5;
Rhowch ragddodiad y porwr yn gyntaf, ac mae'r eiddo CSS3 dilys yn para.
Profwch ragddodynnau'r porwr mewn porwyr hyblyg Mozilla a Webkit.
Allwch Chi Wneud Delweddau Trên Traw
Gosodwch y cymhlethdod ar y ddelwedd ei hun a bydd yn diflannu i'r cefndir. Mae hyn yn ddefnyddiol iawn ar gyfer delweddau cefndirol .
Ac os ydych chi'n ychwanegu tag angor, gallwch greu effeithiau hofran trwy newid cymhlethdod y ddelwedd.
a: hover img {
hidlo: alffa (opacity = 50)
hidlydd: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-wisg-opasrwydd: 0.5;
didwylledd: 0.5;
}
Yn effeithio ar yr HTML hon:
Prawf yr arddulliau uchod a HTML ar waith.
Rhowch Testun ar Eich Delweddau
Gyda chryn dipyn, gallwch osod testun dros ddelwedd ac ymddengys bod y ddelwedd yn diflannu lle mae'r testun hwnnw.
Mae'r dechneg hon ychydig yn anodd, gan na allwch chi ddiffodd y ddelwedd, gan y bydd hynny'n cwympo'r ddelwedd gyfan. Ac ni allwch ddiffodd y blwch testun , oherwydd bydd y testun yn cwympo yno hefyd.
- Yn gyntaf, byddwch chi'n creu DIV cynhwysydd ac yn gosod eich delwedd tu mewn:
- Dilynwch y ddelwedd gyda DIV wag yw hyn y byddwch chi'n ei wneud yn dryloyw.
- Y peth olaf y byddwch chi'n ei ychwanegu yn eich HTML yw'r DIV gyda'ch testun ynddo:
Dyma fy ci Shasta. Onid yw'n braf! - Rydych chi'n ei steilio gyda gosod CSS, i osod y testun uwchben y ddelwedd. Rhoddais fy nhestun ar yr ochr chwith, ond gallwch ei roi ar y dde trwy newid y ddau chwith: 0; eiddo i'r dde: 0; .
#image {
swydd: perthynas;
lled: 170px;
uchder: 128px;
ymyl: 0;
}
#text {
sefyllfa: absoliwt;
top: 0;
chwith: 0;
lled: 60px;
uchder: 118px;
cefndir: #fff;
padio: 5px;
}
#text {
hidlo: alffa (opacity = 70);
hidlydd: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity: 0.70;
didwylledd: 0.7;
}
#words {
sefyllfa: absoliwt;
top: 0;
chwith: 0;
lled: 60px;
uchder: 118px;
cefndir: tryloyw;
padio: 5px;
}
Gweler sut mae'n edrych