Máis información sobre Opacidade CSS3

Facer os seus fondos transparentes

Unha das cousas que pode facer facilmente no deseño de impresión, pero non na web, é un texto de superposición nunha imaxe ou fondo de cores, e cambia a transparencia da imaxe para que o texto desapareza en segundo plano. Pero hai unha propiedade en CSS3 que lle permitirá cambiar a opacidade dos seus elementos para que se esgoten e sáquense: a opacidade.

Como usar a propiedade Opacidade

A propiedade de opacidade leva un valor da cantidade de transparencia de 0.0 a 1.0.

0.0 é 100% transparente; todo por baixo dese elemento mostrará completamente. 1.0 é 100% opaco: nada por baixo do elemento mostrará.

Así que para configurar un elemento ao 50% transparente, escribirías:

opacidade: 0,5;

Vexa algúns exemplos de opacidade en acción

Asegúrese de probar en navegadores máis antigos

Nin IE 6 nin 7 soportan a propiedade de opacidade CSS3. Pero non estás de sorte. En vez diso, IE admite un filtro alfa de propiedade só de Microsoft. Os filtros Alpha en IE aceptan valores de 0 (completamente transparentes) a 100 (completamente opaco). Entón, para obter a súa transparencia no IE, debe multiplicar a súa opacidade en 100 e engadir un filtro alfa aos seus estilos:

filtro: alfa (opacidade = 50);

Ver o filtro alfa en acción (só IE)

E empregue prefixos do navegador

Debería usar os prefixos -moz- e -webkit- para que as versións máis antigas de navegadores Mozilla e Webkit tamén o soporten:

-webkit-opacity: 0.5;
-moz-opacidade: 0,5;
opacidade: 0,5;

Sempre prema primeiro os prefixos do explorador e a última propiedade CSS3 válida.

Proba os prefixos do explorador nos navegadores máis antigos de Mozilla e Webkit.

Podes facer imaxes demasiado transparentes

Establecer a opacidade na imaxe e desaparecerá en segundo plano. Isto é realmente útil para imaxes de fondo .

E se engades unha etiqueta de ancoraxe, pode crear efectos sobre o desprazamento simplemente cambiando a opacidade da imaxe.

a: hover img {
filtro: alfa (opacidade = 50)
filtro: progid: DXImageTransform.Microsoft.Alpha (opacidade = 50)
-moz-opacidade: 0,5;
-webkit-opacity: 0.5;
opacidade: 0,5;
}

Afecta este HTML:

Proba os estilos anteriores e HTML en acción.

Pon texto nas túas imaxes

Con opacidade, pode colocar texto sobre unha imaxe e facer que a imaxe pareza desaparecer onde está o texto.

Esta técnica é un pouco complicada, porque non podes simplemente desaparecer a imaxe, xa que desaparecerá toda a imaxe. E non pode desaparecer a caixa de texto , porque o texto desaparecerá tamén.

1. Primeiro crea un contenedor DIV e coloque a súa imaxe dentro:

   
   

2. Siga a imaxe cun DIV baleiro, isto é o que fará transparente.

   
   
   

3. O último que engades no teu HTML é o DIV co teu texto nel:

   
   
   
   Este é o meu can Shasta. Non é lindo!

4. Vostede o estilo con posicionamento CSS, para colocar o texto por riba da imaxe. Coloque o meu texto no lado esquerdo, pero podes poñelo á dereita cambiando os dous á esquerda: 0; propiedades á dereita: 0; .

   #imagen {
   posición: relativa;
   ancho: 170 px;
   altura: 128 px;
   marxe: 0;
   }
   #text {
   posición: absoluta;
   arriba: 0;
   esquerda: 0;
   ancho: 60px;
   altura: 118 px;
   fondo: #fff;
   padding: 5px;
   }
   #text {
   filtro: alfa (opacidade = 70);
   filtro: progid: DXImageTransform.Microsoft.Alpha (opacidade = 70);
   -moz-opacidade: 0,70;
   opacidade: 0,7;
   }
   #words {
   posición: absoluta;
   arriba: 0;
   esquerda: 0;
   ancho: 60px;
   altura: 118 px;
   fondo: transparente;
   padding: 5px;
   }

Vexa como se ve