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

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras