CSS para hacer transparente un elemento. ¿Cómo hacer que un elemento sea transparente y eliminar la transparencia CSS? Transparencia de varios elementos.
Vlad Merzhevich
El efecto translúcido de un elemento es claramente visible en la imagen de fondo y se ha generalizado en varios sistemas operativos porque luce elegante y hermoso. En diseño web, la translucidez también se utiliza y se logra mediante la propiedad de opacidad o el formato de color RGBA que se establece para el fondo.
bloque de degradado
Haga el bloque que se muestra en la Fig. 1. El bloque contiene un marco degradado translúcido con un fondo degradado debajo del título y un pequeño puntero. El fondo de la página se proporciona únicamente para aclarar el efecto de translucidez; puede indicar cualquier imagen propia. La altura mínima del bloque es 100 px.
¿Cómo hacer una capa semitransparente?
Para cambiar el grado de transparencia 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 hay que utilizar un filtro específico 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, luce muy impresionante en el diseño de un sitio web. Lo principal es que debajo de los bloques translúcidos no hay un diseño monocromático, sino una imagen; es en este caso donde se nota la transparencia; Este efecto se puede lograr de varias maneras, incluidos los métodos antiguos de usar una imagen PNG como fondo, crear una imagen a cuadros y usar la propiedad de opacidad. Pero tan pronto como surge la necesidad de hacer un fondo translúcido en el bloque, estos métodos tienen un inconveniente desagradable. Haré una breve reseña para dejar claro de qué estamos hablando, así como para aquellos lectores que no estén familiarizados con opciones no tradicionales para crear un efecto translúcido.
¿Cómo configurar una mesa para que sea translúcida, pero algunas celdas no lo son?
Para cambiar la transparencia de un elemento, CSS3 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 alpha(Opacity=X) , donde X puede variar de 0 a 100.
¿Cómo configurar el color transparente en CSS? Actualmente hay 3 formas de hacer esto.
Método 1: valor transparente
Si estableces el valor del texto o color de fondo en transparente, el color será completamente transparente, es decir, invisible. Ejemplo:
Color: transparente;
Dicho texto no será visible en la página.
Método 2: modo de color rgba
Y esta es una innovación CSS3. Anteriormente, no existía tal modo en el desarrollo web, solo existía rgb. Seguro que sabes cómo grabar color en este formato. Para hacer esto, debe especificar tres valores entre paréntesis de 0 a 255, que indican la saturación de uno de los tres colores primarios (rojo, verde, azul). Por ejemplo:
Fondo: rgb(230, 121, 156);
El formato rgba no es diferente, solo agrega un cuarto valor: el grado de transparencia del elemento de 0 a 1. En general, este formato de grabación se usa principalmente para establecer un color translúcido, en lugar de completamente transparente. Para lograr una transparencia total, solo necesita escribir 0 como cuarto valor.
Antecedentes: rgba(0, 0, 0, 0);
En este caso, los 3 dígitos restantes no juegan un papel especial.
Se puede configurar un color translúcido si el cuarto parámetro se establece en un valor de 0,01 a 0,99. Ya escribí un poco sobre cómo configurar la translucidez del fondo en , puedes leerlo si estás interesado.
Método 3 - opacidad
Otra propiedad de la tecnología css3. Pero quiero advertirles de inmediato que funciona de manera un poco diferente. La opacidad establece la transparencia de todo el bloque al que se aplica. Por tanto, se deteriora la legibilidad del texto y la percepción de las imágenes. Entonces veo el sentido de usar esta propiedad solo para bloques que no contienen texto ni ninguna otra información. Los valores se pueden establecer de 0 a 1, como es el caso del cuarto parámetro al especificar un color en formato rgba.
En general, por el momento estas son todas las formas que conozco de configurar un color transparente en CSS. Por qué es necesario esto es otra cuestión. A través de un fondo transparente se puede ver lo que hay debajo. A veces es necesario hacerlo de esta manera por diseño. En general, la técnica de la translucidez es muy común en la actualidad.
fondo transparente
Como sabrá, el fondo es una propiedad CSS que le permite establecer un color de fondo o cargar una imagen para que actúe como fondo.
Establecer transparencia para el fondo CSS
Entonces, todo esto se hace de manera muy sencilla gracias a un formato de grabación en color como rgba. Si trabaja con editores gráficos, probablemente sepa que el modo de color rgb significa: la proporción de rojo (rojo), la proporción de verde (verde) y azul (azul). Entonces, rgba es prácticamente el mismo, solo se agrega un parámetro más: la transparencia. Está escrito así:
Color de fondo: rgba(173, 57, 22, 0.5)
Primero indicamos explícitamente que estamos configurando el color en modo rgba. Luego indicamos los valores de saturación de los tres colores primarios de 0 a 255, donde 255 es la saturación más alta. El cuarto parámetro es nuestra transparencia. El valor de 0 a uno se escribe aquí. 1 es un elemento completamente opaco y 0 es un elemento completamente transparente. En consecuencia, si lo establece en 0, el color de fondo no será visible en absoluto.
Ahora ya sabes cómo configurar la propiedad de fondo en transparencia en CSS. Para hacer esto necesitas usar el modo de color rgba. También existe una propiedad de opacidad, pero se aplica a todo el elemento en su conjunto. Es decir, al aplicar opacidad, se puede aplicar transparencia al texto, haciéndolo ilegible.
Ejemplo de fondo transparente
Las ventajas de un fondo translúcido se muestran fácilmente con un ejemplo. Por ejemplo, tenemos un fondo de página general. Así es como se vería el bloque si se le diera un color negro sólido:
Ahora establezcamos el mismo color negro para el bloque, pero especifíquelo usando el formato de color rgba, especificando el último valor como 0,7, por ejemplo. Resultará así: 
Ahora el fondo del bloque es visible a través de él y la imagen de fondo es visible a través de él. Esta imagen y el fondo son sólo a modo de ejemplo. Como puede imaginar, en CSS la transparencia de fondo puede resultar útil cuando desea que el fondo de un elemento anidado se muestre sin oscurecer otros fondos ubicados en otras capas.
Configurar el color usando rgba no es difícil. Como ya se mencionó, las tres primeras letras significan los tres colores primarios: rojo, verde y azul, o más bien su proporción (de 0 a 255). Al establecer diferentes valores, puede obtener millones de colores diferentes y la translucidez le permitirá crear efectos mucho más hermosos para el sitio, si es necesario.
La transparencia en CSS es una técnica bastante de moda últimamente, lo que causa dificultades en la implementación en todos los navegadores. Todavía no existe un método universal que permita implementar la transparencia para todos los navegadores. Sin embargo, últimamente la situación ha mejorado notablemente.
Este artículo proporciona una visión detallada de los enfoques existentes, así como ejemplos de código y explicaciones que le ayudarán a lograr el mismo resultado en todos los navegadores con el mínimo esfuerzo.
Una cosa que vale la pena mencionar es que, si bien la transparencia existe desde hace varios años, nunca ha sido parte del estándar CSS. Esta es una propiedad no estándar que debería formar parte de la especificación CSS3.
Viejo enfoque
En versiones anteriores de Firefox y Safari, debes aplicar la propiedad de la siguiente manera:
#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )
La propiedad -khtml-opacity se usaba en versiones anteriores de navegadores webkit. Esta propiedad ha quedado 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 cual, por supuesto, es poco probable.
La siguiente línea utiliza la propiedad -moz-opacity, que funcionó en versiones muy tempranas del motor 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, basta con utilizar la siguiente propiedad:
#myElement (opacidad: .7;)
En el ejemplo anterior, el elemento está configurado en 70% de opacidad (30% de transparencia). Es decir, si establecemos el valor en uno, el elemento será opaco y, en consecuencia, establecer este valor en cero lo hará invisible.
La propiedad de opacidad procesa 2 dígitos decimales. Es decir, el valor ".01" diferirá del valor ".02", aunque esto no se nota.
Transparencia CSS para Internet Explorer
Como es habitual, Internet Explorer no es compatible con otros navegadores. Además, ya disponemos de tres versiones de este navegador de uso bastante extendido, siendo la configuración de transparencia en cada una de ellas diferente y en ocasiones requiere un esfuerzo adicional para obtener un resultado positivo.
#myElement (filtro: alfa(opacidad=40); )
Este ejemplo utiliza la propiedad filter, que funciona en las versiones 6-8; sin embargo, para las versiones 6 y 7 hay una limitación: la propiedad hasLayout del elemento debe establecerse en true. Esta propiedad está presente sólo en IE y puedes leer más sobre ella, por ejemplo, en Habré.
Otra forma de configurar la transparencia usando CSS en IE8 es utilizar el siguiente enfoque (tenga en cuenta los comentarios):
#myElement ( filtro: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* funciona en IE6, IE7 e IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * sólo para IE8 */ )
La primera línea funcionará en todas las versiones utilizadas actualmente, la segunda, solo en IE8. Tenga en cuenta que la segunda línea utiliza el prefijo -ms- y el valor está entre comillas.
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 sencillo utilizar jQuery, además, funcionará en todos los navegadores:
$("#myElement").css(( opacidad: .4 )); // funciona en todos los navegadores
Puedes animar esta propiedad:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // La animación está completa; este código funciona en todos los navegadores. ));
Función RGBA
CSS3 planea admitir canales alfa usando la función rgba. Esta función funciona en Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Se usa así:
#rgba (antecedentes: 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 (antecedentes: hsla(207, 38%, 47%, .4); )
Un punto importante al utilizar las funciones rgba y hsla es que la configuración de transparencia no se aplica a los elementos secundarios, mientras que el uso de la propiedad de opacidad se hereda.
Determina el nivel de transparencia de un elemento de página web. Cuando el elemento es parcial o totalmente transparente, se ve la imagen de fondo u otros elementos ubicados debajo del objeto translúcido.
Breve información
Designaciones
| Descripción | Ejemplo | |
|---|---|---|
| <тип> | Indica el tipo de valor. | <размер> |
| A && B | Los valores deben generarse en el orden especificado. | <размер> && <цвет> |
| Un | B | Indica que es necesario seleccionar solo un valor de los propuestos (A o B). | normales | pequeñas capitalizaciones |
| Un || B | Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden. | ancho || contar |
| Valores de los grupos. | [ cultivo || cruz ] | |
| * | Repita cero o más veces. | [,<время>]* |
| + | Repita una o más veces. | <число>+ |
| ? | El tipo, palabra o grupo especificado es opcional. | ¿recuadro? |
| (A,B) | Repita al menos A, pero no más de B veces. | <радиус>{1,4} |
| # | Repita una o más veces separadas por comas. | <время># |
Valores
El valor es un número del rango. Un valor de 0 corresponde a la total transparencia del elemento, 1, por el contrario, a su opacidad. Los números fraccionarios de la forma 0,6 establecen la translucidez. Está permitido escribir números sin un cero a la izquierda, como opacidad: .6.
Salvadera
Winnie the Pooh no siempre fue reacio a tomar un refrigerio, especialmente a las once de la mañana, porque a esa hora el desayuno ya había terminado y el almuerzo aún no había comenzado. Y, por supuesto, se alegró terriblemente de ver que el Conejo sacaba tazas y platos.
div (opacidad: 1; )
Ejemplo
El resultado de este ejemplo se muestra en la Fig. 1.
Arroz. 1. Resultado del uso de opacidad
modelo de objetos
Objeto.estilo.opacidad
Nota
Firefox hasta la versión 3.5 admite la propiedad -moz-opacity.
Internet Explorer hasta la versión 9.0 usa filtros para cambiar la transparencia; para este navegador debe escribir filter: alpha(opacity=50), donde el parámetro de opacidad puede tomar un valor de 0 a 100.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
- Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
- Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
- Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
- Borrador ( Borrador de especificación) - el primer borrador de la norma.
Transparencia CSS: solución para varios navegadores - 3,8 sobre 5 basado en 6 votos
En esta lección, veremos la transparencia de CSS, aprenderemos cómo dar transparencia a varios elementos de la página y lograremos una compatibilidad total entre navegadores, es decir, este efecto funcionará de la misma manera en diferentes navegadores.
Cómo configurar la transparencia de cualquier elemento.
En CSS3, la propiedad de opacidad es responsable 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 como fracciones: 0,1, 0,2, 0,3, etc.
Ejemplo de uso:
Transparencia entre navegadores
No todos los navegadores perciben e implementan la propiedad de opacidad anterior de la misma manera. En algunos casos es necesario utilizar un nombre de propiedad o filtros diferentes.
La propiedad de opacidad de CSS3 es compatible con los siguientes tipos de navegadores: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Muy bien :) un navegador como Internet Explorer hasta la versión 9.0 no soporta la propiedad de opacidad y para crear transparencia para este navegador necesitas usar 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, que determina el nivel de transparencia. 0 es completamente transparente y 100 es completamente opaco.
A partir de Firefox anterior a la versión 3.5, admite la propiedad -moz-opacity en lugar de opacidad.
Navegadores como Safari 1.1 y Konqueror 3.1, creados con el motor KHTML, utilizan la propiedad -khtml-opacity para controlar la transparencia.
¿Cómo se puede configurar la transparencia en CSS para que se vea igual en todos los navegadores? Para crear una solución para varios navegadores para la transparencia de elementos, deben especificar no solo una propiedad de opacidad, sino el siguiente conjunto de propiedades:
filtro: alfa(Opacidad=50); /* Transparencia para IE */ -moz-opacity: 0.5; /* Soporta Mozilla 3.5 y versiones anteriores */ -khtml-opacity: 0.5; /* Soporta Konqueror 3.1 y Safari 1.1 */ opacidad: 0.5; /* Soporta todos los demás navegadores */
Transparencia de varios elementos.
Veamos algunos ejemplos de configuración de transparencia para ciertos elementos que se usan con mayor frecuencia en la página.
Transparencia de imagen CSS.
Veamos varias opciones para crear una imagen translúcida. En el siguiente ejemplo, la primera imagen no tiene transparencia, la segunda tiene una transparencia del 50% y la tercera tiene un 30%.
Resultado:
Transparencia en CSS al pasar el cursor sobre una imagen.
A menudo es necesario hacer transparente una imagen o cualquier otro elemento en el momento en que el cursor se sitúa sobre él. Puedes hacer esto 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 este momento. de pasar el cursor por encima.
Puedes ver el resultado en la demostración.
Transparencia de fondo usando CSS.
Aquí es necesario recordar que la transparencia se aplica a todos los elementos anidados y no pueden tener mayor transparencia que el 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 publicado arriba:
