Maak jou agtergrond deursigtig
Een van die dinge wat jy maklik kan doen in gedrukte ontwerp, maar nie op die web, is 'n oortjie teks op 'n prent of gekleurde agtergrond nie, en verander die deursigtigheid van die prent sodat die teks in die agtergrond val. Maar daar is 'n eiendom in CSS3 wat jou toelaat om die deursigtigheid van jou elemente te verander sodat hulle in en uit vervaag: deursigtigheid.
Hoe om die Deursigtigheidseiendom te gebruik
Die deursigtigheidseiendom neem 'n waarde van die hoeveelheid deursigtigheid van 0,0 tot 1,0.
0.0 is 100% deursigtig-enigiets onder die element sal heeltemal deur toon. 1.0 is 100% ondeursigtig - niks onder die element sal deurskynend wees nie.
Om 'n element tot 50% deursigtig te stel, sal jy skryf:
ondeursigtigheid: 0,5;
Sien voorbeelde van dekking in aksie
Wees seker om te toets in ouer blaaiers
Geen IE 6 of 7 ondersteun die CSS3-dekking nie. Maar jy is nie geluk nie. In plaas daarvan ondersteun IE 'n alfa-filter vir Microsoft-netgoed. Alpha filters in IE aanvaar waardes van 0 (heeltemal deursigtig) tot 100 (heeltemal ondeursigtig). Dus, om jou deursigtigheid in IE te kry, moet jy jou dekking met 100 vermeerder en 'n alfa-filter by jou style voeg:
filter: alfa (deursigtigheid = 50);
Sien die alfa-filter in aksie (slegs IE)
En gebruik blaaiervoorvoegsels
Jy moet die -moz- en -webkit-voorvoegsels gebruik, sodat ouer weergawes van Mozilla en Webkit blaaiers dit ook ondersteun:
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
deursigtigheid: 0.5;
Stel altyd die voorvoegsels van die blaaier voor, en die geldige CSS3-eiendom is laas.
Toets die leser voorvoegsels in ouer Mozilla en Webkit blaaiers.
Jy kan prente ook deursigtig maak
Stel die deursigtigheid op die beeld self en dit sal vervaag in die agtergrond. Dit is baie nuttig vir agtergrond beelde .
En as jy 'n anker tag byvoeg, kan jy hover effekte skep net deur die deursigtigheid van die prentjie te verander.
a: hover img {
filter: alfa (deursigtigheid = 50)
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
ondeursigtigheid: 0,5;
}
Beïnvloed hierdie HTML:
Toets die bostaande style en HTML in aksie.
Plaas teks op jou prente
Met deursigtigheid kan jy teks oor 'n prent plaas en die prentjie lyk asof dit vervaag waar die teks is.
Hierdie tegniek is 'n bietjie lastig, want jy kan nie net die beeld vervaag nie, want dit sal die hele prent vervaag. En jy kan nie die tekskassie vervaag nie, want die teks sal ook daar vervaag.
- Eerstens skep jy 'n houer DIV en plaas jou beeld binne:
- Volg die prent met 'n leë DIV-dit is wat jy deursigtig sal maak.
- Die laaste ding wat jy by jou HTML voeg, is die DIV met jou teks daarin:
Dit is my hond Shasta. Is hy nie oulik nie! - Jy styl dit met CSS-posisionering, om die teks bokant die prent te plaas. Ek het my teks aan die linkerkant geplaas, maar jy kan dit regs stel deur die twee links te verander: 0; eienskappe na regs: 0; .
#image {
posisie: relatiewe;
breedte: 170px;
hoogte: 128px;
marge: 0;
}
#text {
posisie: absolute;
top: 0;
links: 0;
breedte: 60px;
hoogte: 118px;
agtergrond: #fff;
padding: 5px;
}
#text {
filter: alfa (deursigtigheid = 70);
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity: 0.70;
ondeursigtigheid: 0,7;
}
#woorde {
posisie: absolute;
top: 0;
links: 0;
breedte: 60px;
hoogte: 118px;
agtergrond: deursigtige;
padding: 5px;
}
Kyk hoe dit lyk