La propiedad CSS de opacidad se utiliza para controlar la opacidad de los elementos de la página. Por especificación, se aplica a cualquier tipo de nodo y es compatible con todos los navegadores modernos. Con su ayuda, puede crear un diseño interesante o implementar una interacción interactiva conveniente con el usuario.

Valores posibles

La sintaxis de la propiedad de opacidad en css se ve así:

Selector (opacidad: 1;) selector (opacidad: 0;) selector (opacidad: 0.4;)

Se aceptan como entrada valores numéricos en el rango de 0 a 1. El parámetro puede ser una fracción de uno, y se usa un punto como separador para partes enteras y fraccionarias en CSS.

Un elemento con transparencia cero se vuelve invisible, pero sigue ocupando su lugar en la página y conserva la capacidad de interactuar con el usuario.

Si el valor de la propiedad es diferente de cero, entonces la transparencia real se calculará como un porcentaje de algún límite superior. Normalmente opacidad: 1 define la opacidad total del elemento.

Transparencia de los nodos secundarios

Sin embargo, si el elemento tiene un padre cuya transparencia difiere de uno, el cálculo cambia. Un descendiente no puede ser "menos transparente" que cualquiera de sus antepasados. El valor de opacidad del bloque padre se convierte en el límite superior de la opacidad del niño.

Padre (opacidad: 0,7;) hijo (opacidad: 1;)

En esta situación, el elemento hijo será un 30% transparente, aunque la opacidad se establezca en uno.

Ejemplos de uso

Ejemplo 1. Translucidez. Es necesario que el fondo principal del bloque sea visible debajo del elemento de destino.

Destino (fondo: negro; opacidad: 0,5;)

No solo el fondo del bloque de destino se vuelve translúcido, sino también el texto.

Ejemplo 2. Control dinámico de transparencia. El valor de la propiedad de opacidad CSS del bloque de destino cambia cuando pasa el cursor sobre él.

Target (opacidad: 0.2;) .target: hover (opacity: 1;)

Transparencia dinámica

El último ejemplo demuestra que los elementos transparentes continúan respondiendo a eventos de página como hover. Esto le permite usar javascript para controlar la propiedad de opacidad de CSS, así como también usar mecanismos de transición y animación para cambiar suavemente el modo de visualización.

Para acceder a la transparencia desde la secuencia de comandos, debe consultar el objeto de estilo de un elemento en particular.

// obtener la opacidad actual var opacity \u003d element.style.opacity; // establecer un nuevo valor element.style.opacity \u003d 0.4;

El desvanecimiento de un bloque se puede implementar usando la propiedad CSS de transición:

Elemento (opacidad: 0.1; transición: opacidad 1000ms;) elemento: hover (opacidad: 0.8; transición: opacidad 2000ms;)

Ahora, el nodo del elemento cambiará la opacidad del 10 al 80% al pasar el mouse en un segundo, y cuando el cursor se vaya, se desvanecerá a su valor original en dos segundos.

La propiedad CSS de opacidad, combinada con el mecanismo de transición, le permite crear hermosos efectos.

Canal alfa en lugar de opacidad

Las principales sutilezas del mecanismo de opacidad en CSS:

• su efecto se extiende no solo al fondo del bloque, sino también a su contenido de texto, que es preferible para mantenerlo claro;
• los elementos secundarios no pueden ser menos transparentes que los elementos principales.

Si estos efectos dificultan la vida del diseñador de maquetación, en lugar de la opacidad, simplemente debería utilizar un fondo transparente, especificando su valor en formato RGBA o HSLA.

CSS3 define una propiedad de opacidad para aplicar transparencia a los elementos de la página. El valor de esta propiedad es un número en el rango de 0.0 a 1.0. Cuando el valor es igual a cero, el elemento se vuelve completamente transparente, y cuando el valor es igual a uno, en consecuencia, es completamente opaco. La propiedad se puede aplicar a cualquier elemento de la página.

Img1 (opacidad: 0,2;) .img2 (opacidad: 0,5;) .img3 (opacidad: 1,0;)

Para establecer la transparencia a través del script, use: object.style.opacity

Los antiguos Mozilla y Firefox 0.8 usan su propio nombre para esta propiedad: -moz-opacity Para establecer la transparencia a través de un script, use: object.style.MozOpacity

Safari 1.1, Konqueror 3.1: construido en el motor KHTML, use la propiedad para controlar la transparencia: -khtml-opacity Para establecer la transparencia a través de un script, use: object.style.KhtmlOpacity

Safari usa la opacidad CSS3 desde la versión 1.2, pero Konqueror anterior a la versión 3.1, habiendo dejado de admitir -khtml-opacity, no introdujo la compatibilidad con la opacidad CSS3.

Internet Explorer desde la versión 5.5 y hasta la última versión de Internet Explorer 7, implementa la transparencia a través del filtro Alpha DirectX. Cabe señalar que este filtro usa un valor de transparencia en el rango de 0 a 100 (no de 0.0 a 1.0). También tenga en cuenta que el filtro solo se puede aplicar a un elemento con alto o ancho o posición establecida en absoluto, o writingMode con valor tb-rl, o contentEditable establecido en verdadero.

Ejemplo (establezca la transparencia a la mitad):

Img1 (filter: progid: DXImageTransform.Microsoft.Alpha (opacidad \u003d 50);) / * IE5.5 + sintaxis (preferida) * / .img2 (filter: alpha (opacidad \u003d 50);) / * Sintaxis IE4 * / To establezca la transparencia a través del script, use: object.style.filter \u003d "progid: DXImageTransform.Microsoft.Alpha (cadena de parámetro)"

Para obtener una transparencia similar a la de W3C, use el valor "opacidad \u003d un número de 0 a 100" como una cadena de parámetros.

Cómo hacer que funcione en todos los navegadores:

filtro: progid: DXImageTransform.Microsoft.Alpha (opacidad \u003d 50); / * IE 5.5 + * / -moz-opacidad: 0.5; / * Mozilla 1.6 y anteriores * / -khtml-opacity: 0.5; / * Konqueror 3.1, Safari 1.1 * / opacidad: 0.5; / * CSS3: Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /

Javascript

function setElementOpacity (sElemId, nOpacity) (var opacityProp \u003d getOpacityProperty (); var elem \u003d document.getElementById (sElemId); if (! elem ||! opacityProp) return; // Si no existe ningún elemento con el id especificado o el navegador lo hace no admite ninguna de las funciones conocidas de formas de controlar la transparencia if (opacityProp \u003d\u003d "filter") // Internet Exploder 5.5+ (nOpacity * \u003d 100; // Si la transparencia ya está configurada, cámbiela a través de la colección de filtros, de lo contrario, agregue transparencia a través de style.filter var oAlpha \u003d elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity \u003d nOpacity; else elem.style.filter + \u003d "progid : DXImageTransform.Microsoft.Alpha (opacity \u003d "+ nOpacity +") "; // Para no sobrescribir otros filtros use" + \u003d ") else // Otros navegadores elem.style \u003d nOpacity;) función getOpacityProperty () (si (typeof document.body.style.opacity \u003d\u003d "string") // Compatible con CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; de lo contrario if (typeof document.body.style.MozOpacity \u003d\u003d "string") // Mozilla 1.6 y versiones anteriores, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity \u003d\u003d "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\\ d.] +); /)\u003e \u003d 5.5) // Internet Exploder 5.5+ return "filter"; falso retorno; // sin transparencia)

Crea un fondo transparente en HTML y CSS (efectos de opacidad y RGBA)

Efecto de translucidez El elemento es claramente visible en la imagen de fondo y se ha generalizado en diferentes sistemas operativos, porque se ve elegante y hermoso. Lo principal no es tener un patrón monocromático debajo de los bloques translúcidos, sino una imagen, es en este caso donde se nota la transparencia.

Este efecto se logra de varias maneras, incluidas técnicas anticuadas como usar una imagen PNG como fondo, crear una imagen a cuadros y opacidad. Pero tan pronto como sea necesario hacer un fondo translúcido en un bloque, estos métodos tienen inconvenientes desagradables.

Considere la translucidez del texto y el fondo: cómo usarlo correctamente en el diseño de sitios web:

La característica principal de esta propiedad es que el valor de transparencia afecta a todos los niños del interior, no solo al fondo. Esto significa que tanto el fondo como el texto se volverán translúcidos. Puede aumentar el nivel de transparencia cambiando el comando de opacidad de 0,1 a 1.

HTML 5 CSS 3 IE 9

En el diseño web, la transparencia parcial también se aplica y se logra a través del formato de color RGBA, que se establece solo para el fondo de un elemento.

Por lo general, en los diseños, solo el fondo de un elemento debe ser translúcido y el texto debe ser opaco para mantener la legibilidad. La propiedad de opacidad es inapropiada aquí porque el texto dentro del elemento también será parcialmente transparente. Es mejor utilizar el formato RGBA, del cual forma parte el canal alfa, o en otras palabras, el valor de transparencia. El valor se escribe rgba, luego los valores de los componentes de color rojo, azul y verde se enumeran entre paréntesis separados por comas. La última es la transparencia, que se establece de 0 a 1, siendo 0 la transparencia total y 1 el color opaco para la sintaxis rgba.

Fondo translúcido HTML 5 CSS 3 IE 9

La opacidad de fondo se establece en 90%: fondo semitransparente y texto opaco.

Descripción

Determina el nivel de transparencia de un elemento de la página web. Con transparencia parcial o total, la imagen de fondo u otros elementos debajo del objeto translúcido aparecen a través del elemento.

Sintaxis

opacidad: valor

Los valores

El valor es un número del rango. Un valor de 0 corresponde a la transparencia total del elemento y 1, por el contrario, a su opacidad. Números fraccionarios como 0,6 establecen translucidez. Se permite escribir números sin cero a la izquierda, como opacidad: .6.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

El resultado de este ejemplo se muestra en la Fig. uno.

Higo. 1. Resultado de usar opacidad

Navegadores

Firefox anterior a 3.5 admite la propiedad no estándar -moz-opacity.

Internet Explorer hasta la versión 9.0 usa filtros para cambiar la transparencia, para este navegador debe escribir filter: alpha (opacidad \u003d 50), donde el parámetro de opacidad puede tomar un valor de 0 a 100.

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 \u003d 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) es un sistema de color que determina el tono mezclando 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 usar 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 \u003d 70); / * para IE8 y versiones 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);