Cómo configurar la transparencia en CSS - bloque transparente. Propiedad de opacidad de CSS: controlar la transparencia

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

Transparencia CSS Opacidad

Valor digital para opacidad establecido en el rango de 0,0 a 1,0, donde cero es transparencia completa 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 presente que opacidad se propaga a todos los elementos secundarios del padre. Esto significa que el texto sobre un fondo translúcido también será translúcido. Y este es un inconveniente muy importante: el texto no destaca tan bien.

La captura de pantalla muestra claramente que el texto negro se ha vuelto tan traslúcido como el fondo azul.

división(
fondo: url(imágenes/tuimagen.jpg); /* Imagen de fondo */
ancho: 750 px;
altura: 100 píxeles;
margen: automático;
}
.azul (
fondo: #027av4; /* Color de fondo translúcido */
opacidad: 0,3; /* Valor de translucidez del fondo */
altura: 70 píxeles;
}
h1 (
relleno: 6px;
familia de fuentes: Arial Black;
peso de fuente: más negrita;
tamaño de fuente: 50px;
}

Transparencia CSS en formato RGBA

Formato para grabar color. RGBA, es una alternativa más moderna para la propiedad opacidad. R (rojo), G (verde), B (azul)- significa: rojo, verde, azul. ultima carta A– significa canal alfa, que establece la transparencia. RGBA a diferencia de Opacidad no afecta a los elementos secundarios.

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

Antecedentes: 027av4; /*Color de fondo*/
opacidad: 0,3; /* valor de translucidez del 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 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 tu sitio web. Es importante que estos bloques traslúcidos vayan encima de un diseño colorido, como por ejemplo una fotografía. Sólo en este caso el efecto será notable. Esta técnica se ha utilizado durante mucho tiempo en el diseño, incluso antes de la llegada 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.

Conclusión

Formato RGBA Soporta 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 sus hijos. Está claro que esto es más conveniente para el maquetador. Mi elección es definitivamente a favor del formato. RGBA recibir transparencia en CSS.

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

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

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 pequeño 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.

×

Buenos días, expertos en desarrollo web, así como novatos. Para aquellos que no siguen las tendencias de TI, o más bien la moda web, me gustaría informarles solemnemente que esta publicación sobre el tema: "Cómo hacer un bloque transparente con herramientas CSS" es adecuada para ustedes. De hecho, en el actual 2016, la introducción de varios objetos transparentes en los servicios en línea se considera una medida elegante.

Por lo tanto, en este artículo le contaré todos los métodos existentes para crear transparencia, comenzando con las soluciones antediluvianas, me centraré en la compatibilidad de las soluciones con los navegadores y también daré ejemplos específicos de código de programa. ¡Ahora manos a la obra!

Método 1. Antediluviano

Cuando las computadoras aún eran débiles y las "habilidades" no estaban desarrolladas, los desarrolladores idearon su propia forma de crear un fondo transparente: usando píxeles transparentes a su vez con píxeles de colores. El bloque creado de esta manera parecía un tablero de ajedrez cuando se escalaba, pero en tamaño normal parecía una especie de transparencia.

Esta "muleta", en mi opinión, sin duda ayuda en versiones antiguas de navegadores en las que las soluciones modernas no funcionan. Pero vale la pena señalar que la calidad de visualización del texto. , inscrito en tal, cae bruscamente.

Método 2. No molesto

En casos raros, los desarrolladores resuelven el problema de introducir una imagen translúcida insertando... ¡una imagen translúcida ya preparada! Para ello se utilizan imágenes guardadas en formato PNG-24. Este formato gráfico permite establecer 256 niveles de translucidez.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Sin embargo, este método no es conveniente por varias razones:

1. Internet Explorer 6 no funciona con esta tecnología; es necesario escribir un código de secuencia de comandos;
2. No puedes cambiar los colores de fondo en CSS;
3. Si la función de visualización de imágenes del navegador está desactivada, desaparecerá.

Método 3. Promocionado

La forma más común y conocida de hacer transparente un bloque es la propiedad opacidad.

El valor del parámetro varía en el rango, donde en 0 el objeto es invisible y en 1 es completamente visible. Sin embargo, aquí también hay momentos desagradables.

Primero, todos los elementos secundarios heredan la transparencia. Esto significa que el texto ingresado también “brillará” junto con el fondo.

En segundo lugar, Internet Explorer vuelve a "dar la vuelta" y, hasta la versión 8, no funciona con opacidad.

Para resolver este problema, utilice filtrar:alfa (Opacidad=valor).

Veamos un ejemplo.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Método 4. Moderno

Hoy en día, los profesionales utilizan la herramienta rgba (r, g, b, a).

Anteriormente les dije que RGB es uno de los modelos de color más populares, donde R es responsable de todos los tonos de rojo, G de los tonos de verde y B de los tonos de azul.

En el caso del parámetro css, la variable A es responsable del canal alfa, que a su vez es responsable de la transparencia.

La principal ventaja de este último método es que el canal alfa no afecta a los objetos ubicados dentro del bloque estilizado.

rgba(r, g, b, a) se admite a partir de:

• 10 versiones de Opera;
• Internet Explorer 9;
• Safari 3.2;
• 3 versiones de Firefox.

¡Me gustaría señalar un hecho interesante! El querido Internet Explorer 7 arroja error al combinar propiedades color de fondo con el nombre de los colores (color de fondo: dorado). Por lo tanto, sólo debes utilizar:

color de fondo: rgba (255, 215, 0, 0,15)

Y ahora un ejemplo.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

En nuestra tienda encontrarás todo tipo de flores.

Tenga en cuenta que el contenido de texto del bloque es completamente visible (100% negro), mientras que el fondo está configurado en un canal alfa de 0,88, es decir. 88%.

Con esto concluye la publicación. Suscríbete a mi blog y no olvides invitar a amigos. ¡Te deseo mucha suerte aprendiendo idiomas web! ¡Adiós!

Saludos cordiales, Roman Chueshov

Leer: 326 veces

Transparencia CSS: solución para varios navegadores - 3,6 sobre 5 basado en 5 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 funciona 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 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, 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 regular: 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:

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 mirada en profundidad a los enfoques existentes, así como ejemplos de código y explicaciones que lo 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.