Feroarings fan jo eftergrûn meitsje
Ien fan 'e dingen dy't jo maklik meitsje kinne yn printûntwerp, mar net op it web, litte tekst op in ôfbylding of kleurde eftergrûn oerskriuwe, en de transparânsje fan dat byld feroarje, sadat de tekst yn' e eftergrûn fusket. Mar der is in eigenskip yn CSS3 dy't jo meitsje kinne om de ûnevenheid fan jo eleminten te feroarjen sadat se yn en út fade: opsetsje.
Hoe brûke de opsjetsaksje
De opsets eigendom nimt in wearde fan it bedrach fan transparânsje fan 0,0 oant 1,0.
0.0 is 100% transparant - alles ûnder dat elemint folslein trochjaan sil. 1.0 is 100% opakke - neat ûnder it elemint sil sjen.
Sa kinne jo in elemint oan 50% transparant ynstelle, jo wolle skriuwe:
ûnevenheid: 0.5;
Sjoch in oantal foarbylden fan de opslach yn aksje
Beafeare om te testen yn âldere browsers
Gjin IE 6 noch 7 stypje it CSS3-opazigens-eigendom. Mar jo binne net út lok. Stel, IE stipet in Microsoft-ienige eigenskip-alfa-filter. Alfafilters yn IE akseptearje wearden fan 0 (folslein transparant) oant 100 (folslein okea). Dus, om jo transparânsje yn IE te krijen, moatte jo oppassing per 100 fermannichfâldigje en in alpha-filter oan jo stilen taheakje:
filter: alpha (opacity = 50);
Sjoch it alfa-filter yn aksje (allinich IE)
En Brûkerfoarfsen brûke
Jo moatte de -moz- en -webkit- prefiks brûke, sadat âldere ferzjes fan Mozilla en Webkit blêders ek stypje:
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
ûnevenheid: 0.5;
Altyd de browser-prefixes foar it earst stelle, en it jildige CSS3-eigenskip lêst.
Besykje de browserfoarbylden yn âldere Mozilla en Webkit-browsers.
Jo kinne ôfbyldings oersichtlik meitsje
Set de opsetsje op it byld sels en it sil yn 'e eftergrûn fade. Dit is echt brûkber foar eftergrûnôfbyldings .
En as jo tafoegje yn in anker tag kinne jo hover-effekten krekt meitsje troch it feroarjen fan de opsetsje fan it byld.
a: hover img {
filter: alpha (opacity = 50)
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
ûnevenheid: 0.5;
}
Beslút dit HTML:
Testje de boppeste stilen en HTML yn aksje.
Set tekst op jo ôfbyldings
Mei ûnevenheid kinne jo tekst op in ôfbylding pleatse en de ôfbylding litte sjen litte wêr't dizze tekst is.
Dizze technyk is in lyts skriklik, om't jo de ôfbylding net krekt ferbliuwe kinne, lykas dat it folsleine ôfbylding ferdwynt. En jo kinne it tekstfak net fylde, om't de tekst dêr ek fade sil.
- Eerst meitsje jo in container DIV en set jo byld yn:
- Folgje it byld mei in lege DIV-dit is wat jo transparant meitsje.
- It lêste ding dat jo yn jo HTML tafoegje is it DIV mei jo tekst yn it:
Dit is myn hûn Shasta. Is hy net moai! - Jo styl mei CSS opstelle, om de tekst boppe it byld te pleatsen. Ik sette myn tekst op 'e lofter side, mar jo kinne it rjochts sette troch de beide linken te feroarjen: 0; Eigenskippen nei rjochts: 0; .
#image {
posysje: relative;
width: 170px;
hichte: 128px;
marzje: 0;
}
#tekst {
posysje: absolute;
top: 0;
links: 0;
width: 60px;
hichte: 118px;
eftergrûn: #fff;
padding: 5px;
}
#tekst {
filter: alpha (opacity = 70);
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity: 0,70;
ûnevenheid: 0,7;
}
#words {
posysje: absolute;
top: 0;
links: 0;
width: 60px;
hichte: 118px;
eftergrûn: transparant;
padding: 5px;
}
Sjoch hoe't it sjocht