La transparencia CSS es una solución para varios navegadores - 3.8 de 5 basado en 6 votos

En esta lección, veremos la transparencia CSS, aprenderemos cómo hacer que varios elementos de la página sean transparentes y lograr una compatibilidad total entre navegadores, es decir, la misma operación de este efecto en diferentes navegadores.

Cómo configurar la transparencia de cualquier elemento

En CSS3, la propiedad de opacidad se encarga de crear elementos transparentes, que se pueden aplicar a cualquier elemento. Esta propiedad tiene valores de 0 a 1, que determinan el grado de transparencia. Donde 0 es transparencia total (el valor predeterminado para todos los elementos) y 1 es opacidad total. Los valores se escriben en fracciones: 0,1, 0,2, 0,3, etc.

Ejemplo de uso:

Transparencia entre navegadores

No todos los navegadores tienen la misma comprensión e implementación de la propiedad de opacidad anterior. En algunos casos, debe utilizar un nombre de propiedad o filtros diferentes.

La propiedad de opacidad CSS3 es compatible con los siguientes tipos de navegadores: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Un navegador tan bueno :) como Internet Explorer hasta la versión 9.0 no admite la propiedad de opacidad y para crear transparencia para este navegador es necesario utilizar la propiedad de filtro y el valor alfa (Opacidad = X), en el que X es un número entero en el rango de 0 a 100 con el que se determina el nivel de transparencia. 0 es completamente transparente y 100 es completamente opaco.

A partir del navegador Firefox anterior a 3.5, admite la propiedad -moz-opacity en lugar de opacity.

Los navegadores como Safari 1.1 y Konqueror 3.1 construidos en el motor KHTML utilizan la propiedad: -khtml-opacity para controlar la transparencia.

¿Cómo se configura la transparencia en CSS para que se vea igual en todos los navegadores? Para crear una solución de varios navegadores para la transparencia de los elementos, necesitan registrar no solo una propiedad de opacidad, sino el siguiente conjunto de propiedades:

filtro: alfa (opacidad = 50); / * Transparencia para IE * / -moz-opacity: 0.5; / * Soporte para Mozilla 3.5 y versiones anteriores * / -khtml-opacity: 0.5; / * Soporte para Konqueror 3.1 y Safari 1.1 * / opacidad: 0.5; / * Soporte para todos los demás navegadores * /

Transparencia de varios elementos

Veamos algunos ejemplos de configuración de transparencia para ciertos elementos que se utilizan con más frecuencia en una página.

Transparencia CSS de la imagen.

Consideremos varias opciones para crear una imagen translúcida. En el siguiente ejemplo, la primera imagen no tiene opacidad, la segunda tiene un 50% de opacidad y la tercera un 30%.

Resultado:

Transparencia en CSS al pasar el cursor sobre la imagen.

A menudo es necesario hacer transparente una imagen o cualquier otro elemento en el momento en que el cursor se desplaza sobre ella. Esto se puede hacer usando la pseudoclase CSS: hover. Para hacer esto, a nuestra imagen se le deben asignar dos clases, una normal: este será el estado inactivo de la imagen y la segunda clase con la pseudoclase: hover, aquí debe especificar la transparencia de la imagen en ese momento de pasar el cursor.

Puedes ver el resultado en la demostración.

Transparencia de fondo a CSS.

Debe recordarse aquí que la transparencia se aplica a todos los elementos anidados y no pueden tener más transparencia que un elemento anidado.

Como ejemplo, daremos una variante con un fondo de página creado con una imagen y un bloque con un fondo creado con color y con una transparencia del 50%.

Código de muestra:

Aquí está el resultado del código anterior:

En esta lección, analizaremos tales CSS propiedades - opacidad y RGBA... Propiedad Opacidad es responsable solo de la transparencia de los elementos, y la función RGBA- para color y transparencia, si especifica el valor de transparencia del canal alfa.

Opacidad CSS

Valor numérico para opacidad especificado en el rango de 0.0 a 1.0, donde cero es transparencia total y uno, por el contrario, es opacidad absoluta. Por ejemplo, para ver un 50% de transparencia, debe establecer el valor en 0,5. Hay que tener en cuenta que opacidad se extiende a todos los hijos del padre. Esto significa que el texto sobre un fondo translúcido también será translúcido. Y esto ya es un inconveniente muy importante, el texto no destaca tan bien.

En la captura de pantalla, puede ver claramente que el texto negro se ha vuelto tan translúcido como el fondo azul.

Div (
fondo: url (images / yourimage.jpg); / * Imagen de fondo * /
ancho: 750px;
altura: 100px;
margen: automático;
}
.azul (
fondo: # 027av4; / * Color de fondo semitransparente * /
opacidad: 0,3; / * Valor de translucidez de fondo * /
altura: 70px;
}
h1 (
relleno: 6px;
familia de fuentes: Arial Black;
font-weight: más negrita;
tamaño de fuente: 50px;
}

Transparencia CSS en formato RGBA

Formato para grabar color RGBA, es una alternativa más moderna a la propiedad opacidad. R (rojo), G (verde), B (azul)- significa: rojo, verde, azul. La ultima carta A- significa el canal alfa, que establece la transparencia. RGBA diferente a Opacidad no afecta a los niños.

Ahora veamos nuestro ejemplo usando RGBA... Reemplacemos estas líneas en estilos.

Fondo: ## 027av4; /* Color de fondo */
opacidad: 0,3; / * valor de translucidez de fondo * /

a la siguiente línea

Antecedentes: rgba (2, 127, 212, 0,3);

Como puede ver, el valor de transparencia de 0.3 es el mismo para ambos métodos.

Resultado del ejemplo con RGBA:

La segunda captura de pantalla se ve mucho mejor que la primera.

Jugando con la translucidez del fondo de los bloques, puedes lograr efectos interesantes en el sitio. Es importante que estos bloques translúcidos pasen sobre un diseño abigarrado, como una fotografía. Solo en este caso el efecto se notará. Esta técnica se ha utilizado durante mucho tiempo en el diseño, incluso antes de la aparición de cualquier CSS3, se implementó puramente en programas gráficos.

Si el cliente requiere que el diseño se vea bien en versiones anteriores del navegador explorador de Internet luego agregue la propiedad filtrar y no olvides comentar para que la validez del código no se vea afectada.

Producción

Formato RGBA son compatibles con todos los navegadores modernos excepto explorador de Internet... También es muy importante que RGBA flexible, actúa solo sobre un elemento específico específico, sin afectar a los niños. Está claro que esto es más conveniente para el diseñador de maquetación. Mi elección está claramente a favor del formato. RGBA para recibir transparencia en CSS.

Para una mejor consolidación del material y una mayor claridad, le sugiero que lo siga.

La transparencia en CSS ha sido una técnica bastante de moda últimamente y está causando dificultades en la implementación de varios navegadores. Hasta ahora, no existe un método único para todos para implementar la transparencia en todos los navegadores. Recientemente, sin embargo, la situación ha mejorado notablemente.

Este artículo analiza detalladamente los enfoques existentes y proporciona ejemplos de código y explicaciones para ayudarlo a lograr el mismo resultado en todos los navegadores con un mínimo esfuerzo.

Otro punto que vale la pena mencionar es que, aunque la transparencia existe desde hace varios años, nunca ha sido parte del estándar CSS. Esta es una propiedad no estándar y debería ser parte de la especificación CSS3.

Enfoque antiguo

En versiones anteriores de Firefox y Safari, debe aplicar la propiedad de esta manera:

#miElemento (-khtml-opacidad: .5; -moz-opacidad: 0.5;)

La propiedad -khtml-opacity se utilizó en versiones anteriores de navegadores webkit. Esta propiedad está obsoleta y ya no es necesaria a menos que esté seguro de que una parte significativa del tráfico de su sitio proviene de visitantes que utilizan Safari 1.x, lo que por supuesto es poco probable.

La siguiente línea usa la propiedad -moz-opacity, que funcionó en versiones muy tempranas del motor de Mozilla. Firefox terminó el soporte para él en la versión 0.9.

Transparencia CSS en Firefox, Safari, Chrome y Opera

Para la mayoría de los navegadores modernos, la siguiente propiedad es suficiente:

#myElement (opacidad: .7;)

En el ejemplo anterior, el elemento se establece en un 70% de opacidad (30% de opacidad). Es decir, si establecemos el valor en uno, entonces el elemento será opaco y, en consecuencia, establecer este valor en cero lo hará invisible.

La propiedad de opacidad maneja 2 dígitos decimales. Es decir, el valor ".01" diferirá del valor ".02", aunque no se nota mucho.

Transparencia CSS para Internet Explorer

Como es habitual, Internet Explorer no está en buenas condiciones con otros navegadores. Además, ahora tenemos tres versiones de este navegador de uso bastante extendido, la configuración de transparencia en cada una de las cuales es diferente y en ocasiones requiere esfuerzos adicionales para obtener un resultado positivo.

#myElement (filtro: alfa (opacidad = 40);)

Este ejemplo usa la propiedad filter, que funciona en las versiones 6-8, pero hay una limitación para las versiones 6 y 7: el elemento debe tener su propiedad hasLayout establecida en true. Esta propiedad solo está presente en IE y puede leer más sobre ella, por ejemplo, en Habré.

Otra forma de establecer la transparencia usando CSS en IE8 es usar el siguiente enfoque (tenga en cuenta los comentarios):

#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 40); / * funciona en IE6, IE7 e IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 40)"; / * Solo IE8 * /)

La primera línea funcionará en todas las versiones actualmente en uso, la segunda solo en IE8. Tenga en cuenta que la segunda línea usa el prefijo -ms- y el valor se cita.

Configurar y cambiar la transparencia de CSS usando JavaScript o jQuery

Puede utilizar el siguiente código para establecer la transparencia:

Document.getElementById ("myElement"). Style.opacity = ".4"; // para la mayoría de los navegadores document.getElementById ("myElement"). style.filter = "alpha (opacity = 40)"; // para IE

Eso sí, en este caso es mucho más fácil usar jQuery, además, funcionará en todos los navegadores:

$ ("# myElement"). css ((opacidad: .4)); // funciona en todos los navegadores

Puede animar esta propiedad:

$ ("# myElement"). animate ((opacidad: .4), 1000, function () (// Animación completa; este código funciona en todos los navegadores.));

Función RGBA

Está previsto admitir el canal alfa en CSS3 mediante la función rgba. Esta función funciona en Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Se usa así:

#rgba (fondo: rgba (98, 135, 167, .4);)

En este caso, el último parámetro indica el nivel de opacidad.

Función HSLA

Similar a la función anterior, CSS3 también le permite establecer un color semitransparente usando la función HSLA, cuyos parámetros son Tono, Saturación, Luminosidad y Alfa.

#hsla (fondo: hsla (207, 38%, 47%, .4);)

Un punto importante al usar las funciones rgba y hsla es que la configuración de opacidad no se aplica a los elementos secundarios, mientras que la propiedad de opacidad se hereda.

Vlad Merzhevich

El efecto de translucidez de un elemento es claramente visible en la imagen de fondo y se ha generalizado en diferentes sistemas operativos porque se ve elegante y hermoso. En el diseño web, la translucidez también se aplica y se logra mediante la propiedad de opacidad o el formato de color RGBA que se establece para el fondo.

Bloque degradado

Haga el bloque que se muestra en la fig. 1. El bloque contiene un marco degradado semitransparente con un fondo degradado debajo del encabezado y un pequeño puntero. El fondo de la página se muestra solo para mayor claridad del efecto de translucidez, puede especificar cualquiera de sus propias imágenes. La altura mínima del bloque es 100px.

¿Cómo hago una capa semitransparente?

Para cambiar la opacidad de un elemento, utilice la propiedad de estilo de opacidad con un valor de 0 a 1, donde 0 corresponde a la transparencia total y 1, por el contrario, a la opacidad del objeto. Esta propiedad no funciona en Internet Explorer, por lo que debe usar un filtro específicamente para ella, una propiedad que no forma parte de la especificación CSS. El ejemplo 1 muestra cómo configurar la transparencia de la capa para todos los navegadores.

Fondo translúcido

Vlad Merzhevich

La transparencia parcial, cuando se usa correctamente, se ve muy impresionante en el diseño de sitios web. Lo principal es que debajo de los bloques translúcidos no hay un patrón de un solo color, sino una imagen, en este caso la transparencia se nota. Este efecto se logra de diferentes maneras, y si recuerda todo, incluidos los métodos anticuados, entonces está usando una imagen PNG como fondo, creando una imagen a cuadros y la propiedad de opacidad. Pero tan pronto como sea necesario hacer un fondo translúcido en un bloque, estos métodos tienen un inconveniente desagradable. Haré un breve resumen para que quede claro lo que está en juego, así como para aquellos lectores que no estén familiarizados con opciones poco convencionales para crear un efecto de translucidez.

¿Cómo puedo configurar la mesa para que sea semitransparente, pero algunas de las celdas no lo son?

Para cambiar la transparencia de un elemento en CSS3, se proporciona la propiedad de opacidad, su valor puede variar de 0 a 1. Cero corresponde a la transparencia total del elemento y uno, por el contrario, a la opacidad. Los navegadores modernos funcionan bastante correctamente con esta propiedad, a excepción de Internet Explorer, por lo que para ello hay que utilizar una propiedad de filtro especial con el valor alfa (Opacidad = X), donde X puede variar de 0 a 100.

La propiedad CSS de opacidad es responsable de la transparencia de los elementos (imágenes, texto, bloques) en html.

Sintaxis de opacidad CSS

Donde valor puede tomar valores reales en el rango de 0.0 a 1.0. Un valor de 1.0 significa que no hay transparencia (predeterminado).

Ejemplo 1. Imagen transparente en html

La primera imagen se muestra sin transparencia, la segunda con transparencia 0.5

Translucidez del elemento

¡Hacer la imagen semitransparente al pasar el mouse!

DemoDescargar fuente

¡Gracias por la atención!

Artículo siguiente
¿Cómo crear un bloque div de desplazamiento?