Aprenda acerca de la opacidad CSS3

Hacer sus fondos transparentes Una de las cosas que puede hacer fácilmente en el diseño de impresión pero no en la Web es superponer texto en una imagen o fondo de color, y cambiar la transparencia de esa imagen para que el texto se desvanezca en el fondo.

Hacer sus fondos transparentes

Una de las cosas que puede hacer fácilmente en el diseño de impresión pero no en la Web es superponer texto en una imagen o fondo de color, y cambiar la transparencia de esa imagen para que el texto se desvanezca en el fondo. Pero hay una propiedad en CSS3 que le permitirá cambiar la opacidad de sus elementos para que se desvanezcan: opacity .

Cómo usar la propiedad de opacidad

La propiedad de opacidad toma un valor de la cantidad de transparencia de 0.0 a 1.0. 0.0 es 100% transparente: cualquier cosa debajo de ese elemento se mostrará completamente. 1.0 es 100% opaco; no se mostrará nada debajo del elemento.

Entonces, para establecer un elemento al 50% transparente, escribiría:

opacidad: 0.5;

Vea algunos ejemplos de opacidad en acción.

Asegúrese de realizar pruebas en navegadores antiguos

Ni IE 6 ni 7 admiten la propiedad de opacidad CSS3. Pero no tienes suerte. En cambio, IE admite una propiedad filtro alfa exclusiva de Microsoft. Los filtros alfa en IE aceptan valores de 0 (completamente transparente) a 100 (completamente opaco). Entonces, para obtener su transparencia en IE, debe multiplicar su opacidad por 100 y agregar un filtro alfa a sus estilos:

filter: alpha (opacidad = 50);

Ver el filtro alfa en acción (solo IE)

Y use los prefijos del navegador

Debe usar los prefijos -moz- y -webkit- para que las versiones anteriores de los navegadores Mozilla y Webkit también lo admitan:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

Siempre ponga los prefijos del navegador primero, y la propiedad CSS3 válida al final.

Pruebe los prefijos del navegador en los navegadores anteriores de Mozilla y Webkit.

También puedes hacer que las imágenes sean transparentes

Establezca la opacidad en la imagen y se desvanecerá en el fondo. Esto es realmente útil para imágenes de fondo.

Y si agrega una etiqueta de anclaje, puede crear efectos de desplazamiento simplemente cambiando la opacidad de la imagen.

a: hover img {
filter: alpha (opacity = 50)
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
- moz-opacity: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
}

Afecta este HTML:

Pruebe los estilos y HTML anteriores en acción.

Poner texto en tus imágenes

Con opacidad, puede colocar texto sobre una imagen y hacer que la imagen parezca desvanecerse donde está ese texto.

Esta técnica es un poco complicada, ya que no puedes simplemente desvanecer la imagen, ya que eso desvanecerá toda la imagen. Y no puede desvanecer el cuadro de texto, porque el texto también se desvanecerá allí.

  1. Primero crea un contenedor DIV y coloca su imagen dentro:
  2. Siga la imagen con un DIV vacío; esto es lo que hará transparente.
  3. Lo último que agrega en su HTML es el DIV con su texto:

    1. Este es mi perro Shasta. ¿No es lindo?
  4. Lo puede diseñar con posicionamiento CSS, para colocar el texto sobre la imagen. Coloqué mi texto en el lado izquierdo, pero puede colocarlo a la derecha cambiando las dos propiedades left: 0; a right: 0; . #image {

    1. posición: relativa;
    2. ancho: 170px;
    3. altura: 128 px;
    4. margen: 0;
    5. }
    6. #text {
    7. posición: absoluta;
    8. arriba: 0;
    9. izquierda: 0;
    10. ancho: 60px;
    11. altura: 118px;
    12. fondo: #fff;
    13. acolchado: 5px;
    14. }
    15. #text {
    16. filtro: alfa (opacidad = 70);
    17. filtro: progid: DXImageTransform.Microsoft.Alpha (opacidad = 70);
    18. -moz-opacidad: 0.70;
    19. opacidad: 0.7;
    20. }
    21. #palabras {
    22. posición: absoluta;
    23. arriba: 0;
    24. izquierda: 0;
    25. ancho: 60px;
    26. altura: 118px;
    27. fondo: transparente;
    28. acolchado: 5px;
    29. }

Mira cómo se ve

Rate article
labsfabs.com
Add a comment