Más información sobre la opacidad de CSS3 y la transparencia de los fondos

Más información sobre la opacidad de CSS3 y la transparencia de los fondos

VALORACIÓN DEL ARTÍCULO:
5/5


Una de las cosas que puede hacer fácilmente en el diseño impreso pero no en la Web es superponer texto sobre 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 te permitirá cambiar la opacidad de tus elementos para que entren y salgan: la opacidad.

Cómo usar la propiedad de opacidad

La propiedad opacidad toma un valor de la cantidad de transparencia de 0,0 a 1,0. 0.0 es 100% transparente – cualquier cosa por debajo de ese elemento se mostrará completamente. 1.0 es 100% opaco: nada por debajo del elemento se verá a través de él.

Así que para establecer un elemento al 50% de transparencia, usted escribiría:

opacidad:0,5;

Vea algunos ejemplos de opacidad en acción

Asegúrese de probar en navegadores antiguos

Ni IE 6 ni 7 soportan la propiedad de opacidad de CSS3. Pero no te falta suerte. En su lugar, IE soporta un filtro alfa de propiedades sólo de Microsoft. Los filtros alfa en IE aceptan valores desde 0 (completamente transparentes) hasta 100 (completamente opacos). Por lo tanto, para obtener su transparencia en IE, debe multiplicar su opacidad por 100 y añadir un filtro alfa a sus estilos:

filtro: alfa(opacidad=50);

Vea el filtro alfa en acción (sólo IE)

Y usar los prefijos del navegador

Deberías usar los prefijos -moz- y -webkit- para que las versiones anteriores de los navegadores Mozilla y Webkit también lo soporten:

-Capacidad del webkit: 0.5;
-moz-opacidad: 0.5;
opacidad: 0,5;

Siempre ponga los prefijos del navegador en primer lugar, y la propiedad CSS3 válida en último lugar.

Pruebe los prefijos del navegador en navegadores Mozilla y Webkit antiguos.

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

Configure la opacidad en la propia imagen y ésta se desvanecerá en el fondo. Esto es realmente útil para las imágenes de fondo.

Y si añades una etiqueta de anclaje, puedes crear efectos de flotador simplemente cambiando la opacidad de la imagen.

a:hover img {
filtro: alpha(opacidad=50)
filtro: progid:DXImageTransform.Microsoft.Alpha(opacidad=50)
-moz-opacidad: 0.5;
-Capacidad del webkit: 0.5;
opacidad:0,5;

Afecta a este HTML:

Pruebe los estilos anteriores y HTML en acción.

Ponga texto en sus imágenes

Con opacidad, puede colocar texto sobre una imagen y hacer que la imagen aparezca para que se desvanezca donde está ese texto.

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

  1. Primero se crea un contenedor DIV y se coloca la imagen dentro:
  2. Siga la imagen con un DIV vacío, esto es lo que hará transparente.
  3. La última cosa que usted agrega en su HTML es el DIV con su texto en él:
    1. Este es mi perro Shasta. ¿No es lindo!
  4. Se le da estilo con posicionamiento CSS, para colocar el texto encima de la imagen. Coloqué mi texto en el lado izquierdo, pero puedes ponerlo en el derecho cambiando las dos propiedades izquierda:0; propiedades a derecha:0;. #Imagen {
    1. posición:relativo;
    2. ancho:170px;
    3. altura:128px;
    4. margen:0;
    5. #texto {
    6. posición:absoluta;
    7. arriba:0;
    8. izquierda:0;
    9. ancho:60px;
    10. altura:118px;
    11. fondo:#fff;
    12. acolchado:5px;
    13. #texto {
    14. filtro: alfa(opacidad=70);
    15. filter: progid:DXImageTransform.Microsoft.Alpha(opacidad=70);
    16. -moz-opacidad: 0,70;
    17. opacidad:0,7;
    18. #palabras {
    19. posición:absoluta;
    20. arriba:0;
    21. izquierda:0;
    22. ancho:60px;
    23. altura:118px;
    24. fondo:transparente;
    25. acolchado:5px;

Vea cómo se ve

Deja un comentario

TAMBIÉN TE INTERESA

monitores-Samsung-M8

Samsung M8: un monitor que es también smart tv y mucho más…

Hay quien usa tres monitores a la vez para trabajar. El segmento de los monitores de PC avanza rápidamente. Hace solo unos años la tendencia era adquirir monitores curvos, pero hoy la dinámica vuelve al llano y, por supuesto, a la extrema delgadez. No obstante, Samsung va más allá con su nuevo monitor Samsung M8.

Huawei-P50-Pro

Las mejores aplicaciones para disfrutar el nuevo Huawei P50 Pro

Huawei ha anunciado los nuevos smartphones Huawei P50 Pro y P50 Pocket, las últimas incorporaciones a su icónica línea de productos de la Serie P. Con cada lanzamiento de la Serie P, la marca china sigue mostrando toda su capacidad innovadora ya sea a nivel de rendimiento y especificaciones de los terminales como por todo

Poly-Sync-10

Poly lanza un nuevo altavoz inteligente para el trabajo híbrido: Sync 10

Poly ha anunciado recientemente el lanzamiento del Poly Sync 10, la última incorporación a su conocida familia de altavoces inteligentes y manos libres, Poly Sync. El nuevo dispositivo responde a las necesidades emergentes de empresas y profesionales, que tienen que desenvolverse de forma eficiente en un contexto de trabajo cada vez más híbrido, flexible y

CCleaner 2022

Novedades importantes con la herramienta CCleaner

Hoy vamos a hablar de CCleaner, una herramienta que cuenta con cientos de millones de usuarios domésticos y empresariales en todo el mundo que trabaja para optimizar el rendimiento de los equipos, mejorar la seguridad de los mismos y prolongar la vida útil de los ordenadores.   CCleaner es el rey del mantenimiento en lo

resistencia-Cat-phones

Cat phones, una década brillando con los dispositivos más resistentes

Hay marcas que huyen del mainstream y son casos de éxito. Cat phones es una de esas compañías que se ha alejado de lo convencional para centrarse en otras necesidades y convertirse así en grandes expertos en la resistencia de sus dispositivos. De la mano de Bullitt Group, la firma celebra 10 años de trayectoria