Hay tres formas de cambiar la transparencia de un elemento en CSS:
usando la propiedad de opacidad,
usando la función rgba (),
usando la función hsla ().
1. La propiedad de opacidad
La propiedad de opacidad le permite hacer que cualquier elemento de una página web sea parcial o completamente transparente. Esta propiedad cambia la transparencia de los elementos que tienen una imagen de fondo (imagen) o un fondo con un color o degradado. Si el elemento para el que se aplica la propiedad de opacidad contiene otros elementos dentro de él, también cambiarán su opacidad.
La propiedad de opacidad varía de 0 (completamente transparente) a 1 (opaco), por ejemplo:
H1 (color: # CD6829;) div (fondo: # CDD6DB; opacidad: .3;) 
Arroz. 1. Transparencia de elementos usando opacidad
2. La función rgba ()
El modelo de color RGBA crea un tinte de color al mezclar en las proporciones requeridas rojo rojo), verde verde) y azul Azul) colores, y canal alfa (alfa) es responsable del grado de transparencia del color. A diferencia de la propiedad de opacidad, para un bloque que contiene otros elementos, la función rgba () solo cambiará la opacidad del bloque.
Arroz. 2. Modelo de color RGB h1 (color: # CD6829;) div (fondo: rgba (205, 214, 219, 0.3);) 
Arroz. 3. Transparencia de elementos usando la función rgba () 3. La función hsla ()
Función hsla () cuyos parámetros significan tono (tono), saturación, brillo y canal alfa (alfa), también le permite establecer un color semitransparente.
Los tintes de color se especifican como un porcentaje utilizando el valor correspondiente de la rueda de colores. El círculo en sí está dividido en sectores, en cuyos bordes hay colores primarios:
0/360 ° - rojo
60 ° - amarillo
120 ° - verde
180 ° - azul
240 ° - azul
270 ° - violeta
300 ° es magenta.
Para obtener negro, debe establecer los valores de tono, saturación y brillo en cero - hsla (0, 0%, 0%, 1). El blanco se obtiene al 100% de luminancia hsla (0, 0%, 100%, 1) y el gris se obtiene a saturación cero hsla (0, 0%, 50%, 1).
La propiedad de opacidad se utiliza para crear un efecto de transparencia en CSS.
IE8 y los navegadores anteriores admiten una propiedad alternativa: filtro: alfa (opacidad = x), donde "x" puede tomar un valor de 0 a 100, cuanto menor sea el valor, más transparente será el elemento.
Todos los demás navegadores admiten la propiedad de opacidad CSS estándar, que puede tomar como valor números de 0.0 a 1.0, cuanto menor sea el valor, más transparente será el elemento:
Tratar "
Transparencia flotante
La pseudoclase: hover te permite cambiar la apariencia de los elementos cuando pasas el cursor sobre ellos. Aprovecharemos esta oportunidad para hacer que la imagen pierda su transparencia al pasar el mouse:
Tratar "
Transparencia de fondo
Hay dos formas posibles de hacer que un elemento sea transparente: la propiedad de opacidad descrita anteriormente y especificando el color de fondo en formato RGBA.
Es posible que ya esté familiarizado con el modelo de representación de color RGB. RGB (rojo, verde, azul: rojo, verde, azul): un sistema de color que determina el tono mezclando los colores rojo, verde y azul. Por ejemplo, puede utilizar cualquiera de las siguientes declaraciones para establecer el color del texto en amarillo:
Color: rgb (255,255,0); color: rgb (100%, 100%, 0);
Los colores especificados con RGB diferirán de los valores hexadecimales que usamos antes en que permiten el canal de transparencia alfa. Esto significa que el fondo de un elemento con transparencia alfa mostrará lo que hay debajo.
La declaración de color RGBA es similar en sintaxis a las reglas RGB estándar. Sin embargo, entre otras cosas, debemos declarar el valor como RGBA (en lugar de RGB) y establecer un valor decimal adicional para la transparencia después del valor de color en el rango de 0.0 (completamente transparente) a 1 (completamente opaco).
Color: rgba (255,255,0,0.5); color: rgba (100%, 100%, 0.0.5);
La diferencia entre la propiedad de opacidad y RGBA es que la propiedad de opacidad aplica transparencia a todo el elemento, es decir, todo el contenido del elemento se vuelve transparente. Y RGBA le permite establecer la transparencia de partes individuales de un elemento (por ejemplo, solo el texto o el fondo):
Body (background-image: url (img.jpg);) .prim1 (width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha (opacidad = 70); / * para IE8 y anteriores * / text-align: center;) .prim2 (ancho: 400px; margen: 30px 50px; color de fondo: rgba (255,255,255,0.5); borde: 1px sólido black; font-weight: bold; text-align: center;) Pruébelo "
Nota: los valores RGBA no son compatibles con IE8 y versiones anteriores. Para declarar un color de respaldo para navegadores más antiguos que no admiten valores de color con canales alfa, especifíquelo primero antes del valor RGBA: background: rgb (255,255,0); fondo: rgba (255,255,0,0.5);
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
Realice 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 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 varias 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é una breve reseña para que quede claro lo que está en juego, así como para aquellos lectores que no estén familiarizados con las opciones poco convencionales para crear el 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 del navegador 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
opacidad: valor;
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).
Ejemplos: cómo la transparencia en html
Ejemplo 1. Imagen transparente en html
La primera imagen se muestra sin transparencia, la segunda con transparencia 0.5
Ejemplo # 2. Efectos con transparencia en html
Por defecto, el bloque es parcialmente transparente. Cuando pasa el mouse sobre el mouse, el bloque se vuelve brillante. Estos efectos se utilizan a menudo en el diseño de sitios web.
La página se convierte a la siguiente
Ejemplo No. 3. Bloque transparente sobre imagen en html
A continuación se muestra un ejemplo de un bloque semitransparente que oscurece parcialmente la imagen. El bloque cubre deliberadamente la imagen no completamente para mostrar cómo se ve sobre un fondo vacío.
La página se convierte a la siguiente
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 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 importante 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 dejó de admitirlo 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 de costumbre, 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.