Fer que els seus fons siguin transparents
Una de les coses que podeu fer fàcilment en el disseny d'impressió, però no a la Xarxa, és un text de superposició sobre una imatge o un fons de color i canvia la transparència d'aquesta imatge perquè el text es desfà en segon pla. Però hi ha una propietat en CSS3 que us permetrà canviar l'opacitat dels vostres elements perquè es desapareguin i surtin: l'opacitat.
Com s'utilitza la propietat Opacity
La propietat d'opacitat pren un valor de la quantitat de transparència de 0.0 a 1.0.
0.0 és 100% transparent, tot allò que es mostri a sota d'aquest element es mostrarà completament. 1.0 és 100% opac: res per sota de l'element es mostrarà.
Així, per configurar un element al 50% de transparència, escriviu:
opacitat: 0,5;
Vegeu alguns exemples d'opacitat en acció
Estigueu segur de provar en navegadors antics
Ni IE 6 ni 7 admeten la propietat d'opacitat CSS3. Però no tens sort. En lloc d'això, IE admet un filtre alfa de propietat només de Microsoft. Els filtres Alpha en IE accepten valors de 0 (completament transparents) a 100 (completament opacs). Per tant, per aconseguir la vostra transparència a l'IE, heu de multiplicar la vostra opacitat en 100 i afegir un filtre alfa als vostres estils:
filtre: alfa (opacitat = 50);
Vegeu el filtre alfa en acció (només per IE)
I utilitzeu els prefixos del navegador
Heu d'utilitzar els prefixos -moz- i -webkit- perquè les versions anteriors dels navegadors Mozilla i Webkit també ho admetin:
-webkit-opacity: 0.5;
-moz-opacitat: 0,5;
opacitat: 0,5;
Sempre posi els prefixos del navegador en primer lloc, i la propietat CSS3 vàlida per última vegada.
Prova els prefixos del navegador en els navegadors més antics de Mozilla i Webkit.
Podeu fer que les imatges siguin transparents
Estableix l'opacitat a la imatge i es desfà en el fons. Això és realment útil per a imatges de fons .
I si afegiu una etiqueta d'ancoratge, podeu crear efectes de desplaçament només canviant l'opacitat de la imatge.
a: hover img {
filtre: alfa (opacitat = 50)
filtre: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacitat: 0,5;
-webkit-opacity: 0.5;
opacitat: 0,5;
}
Afecta aquest codi HTML:
Proveu els estils i HTML anteriors en acció.
Poseu text a les vostres imatges
Amb l'opacitat, podeu col · locar text sobre una imatge i semblar que la imatge s'esvaeix quan aquest text és.
Aquesta tècnica és una mica complicada, perquè no es pot simplement esvair la imatge, ja que es desfà tota la imatge. I no es pot desaparèixer el quadre de text , ja que el text es desfà també.
- Primer creeu un contenidor DIV i col·loqueu la vostra imatge:
- Seguiu la imatge amb un DIV buit: això és el que faràs transparent.
- L'últim que afegiu al vostre HTML és el DIV amb el vostre text:
Aquest és el meu gos Shasta. No és bonic! - L'estil amb el posicionament CSS, per col·locar el text a sobre de la imatge. Vaig col·locar el meu text al costat esquerre, però podeu posar-lo a la dreta canviant els dos a l'esquerra: 0; propietats a la dreta: 0; .
#image {
posició: relativa;
ample: 170 px;
alçada: 128 px;
marge: 0;
}
#text {
posició: absoluta;
top: 0;
esquerra: 0;
ample: 60 px;
alçada: 118 px;
antecedents: #fff;
farcit: 5px;
}
#text {
filtre: alfa (opacitat = 70);
filtre: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacitat: 0,70;
opacitat: 0,7;
}
#words {
posició: absoluta;
top: 0;
esquerra: 0;
ample: 60 px;
alçada: 118 px;
fons: transparent;
farcit: 5px;
}
Veure com es veu