CSS para hacer transparente un elemento. Usando una imagen PNG. Establecer transparencia para el fondo CSS
Valoración 1 Valoración 2 Valoración 3 Valoración 4 Valoración 5 Detalles Categoría: diseñador web Autor: SEO & WEB - KELL4 Creación de un fondo transparente en HTML y CSS (efectos de opacidad y RGBA)El efecto de translucidez de un elemento es claramente visible en la imagen de fondo y se ha generalizado en diferentes sistemas operativos porque luce elegante y hermoso. Lo principal es no tener un patrón monocromático debajo de los bloques translúcidos, sino una imagen; en este caso, la transparencia se vuelve notable;
Este efecto se logra de varias maneras, incluidos métodos antiguos como usar una imagen PNG como fondo, crear una imagen a cuadros y la propiedad de opacidad. Pero tan pronto como surge la necesidad de hacer un fondo translúcido en el bloque, estos métodos tienen inconvenientes desagradables.
Veamos la translucidez del texto y el fondo: cómo utilizarla correctamente en el diseño de un sitio web:
La característica principal de esta propiedad es que el valor de transparencia afecta a todos los elementos secundarios que contiene, no solo al fondo. Esto significa que tanto el fondo como el texto se volverán traslúcidos. Puede aumentar el nivel de transparencia cambiando el comando de opacidad de 0,1 a 1.
HTML 5 CSS 3 IE 9 opacidad cuerpo ( fondo: url(images/cat.jpg); ) div ( opacidad: 0.6; fondo: #fc0; /* Color de fondo */ relleno: 5px; /* Márgenes alrededor del texto */ ) Creación y promoción de sitios web en Internet.
En el diseño web también se utiliza la transparencia parcial y se logra mediante el formato de color RGBA, que se establece solo para el fondo del elemento.
Normalmente, en un diseño, sólo el fondo de un elemento debe ser translúcido y el texto debe ser opaco para mantener la legibilidad. La propiedad de opacidad no es adecuada aquí porque el texto dentro del elemento también será parcialmente transparente. Es mejor utilizar el formato RGBA, que tiene un canal alfa, o en otras palabras, un valor de transparencia, como parte del mismo. 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. El último es la transparencia, que se establece de 0 a 1, donde 0 significa transparencia total y 1 opacidad de color: la sintaxis para usar rgba.
Fondo semitransparente HTML 5 CSS 3 IE 9 rgba body ( fondo: url(images/cat.jpg); ) div ( fondo: rgba(0, 170, 238, 0.4); /* Color de fondo */ color: #fff ; /* Color del texto */ padding: 5px; /* Márgenes alrededor del texto */ ) Creación y promoción de sitios web en Internet. La opacidad del fondo está establecida en 90%: fondo semitransparente y texto opaco.
Transparencia CSS: solución para varios navegadores: 3,8 de 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 compatibilidad total entre navegadores, es decir, este efecto funcionará igual 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 .im (filtro: alfa(Opacidad=50); -moz-opacidad: 0,5; -khtml-opacidad: 0,5; opacidad: 0,5;)
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 establecida, la segunda tiene una transparencia del 50% y la tercera tiene un 30%.
Transparencia .im1 (filtro: alfa(Opacidad=50); -moz-opacidad: 0.5; -khtml-opacidad: 0.5; opacidad: 0.5; ) .im2 (filtro: alfa(Opacidad=30); -moz-opacidad: 0.3 ; -khtml-opacidad: 0,3;
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.
Transparencia .im1 (filtro: alfa(Opacidad=100); -moz-opacidad: 1; -khtml-opacidad: 1; opacidad: 1; ) .im1:hover (filtro: alfa(Opacidad=50); -moz-opacidad : 0,5; -khtml-opacidad: 0,5; opacidad: 0,5; ) .im2 (filtro: alfa(Opacidad=30); -moz-opacidad: 0,3; -khtml-opacidad: 0,3; opacidad: 0,3; ) .im2:hover (filtro: alfa(Opacidad=100); -moz-opacidad: 1; -khtml-opacidad: 1; opacidad: 1;)
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:
Transparencia CUERPO ( fondo: url(bg.png); /* Imagen como fondo */ ) .blok ( fondo: #FC0; /* Color de fondo */ padding: 5px; /* Padding */ color: #000000; /* Color del texto */ filtro: alfa(Opacidad=50); -moz-opacidad: 0,5 -khtml-opacidad: 0,5;
Aquí está el resultado del código publicado arriba:
/* 06.07.2006 */
Transparencia CSS (opacidad css, opacidad javascript)El efecto de transparencia es el tema de este artículo. Si está interesado en aprender cómo hacer que los elementos de una página HTML sean transparentes usando CSS o Javascript, y cómo lograr compatibilidad entre navegadores (misma experiencia en diferentes navegadores) teniendo en cuenta los navegadores Firefox, Internet Explorer, Opera, Safari, Konqueror, entonces son bienvenidos. Además, veamos una solución preparada para cambiar gradualmente la transparencia usando JavaScript.
Opacidad CSS (transparencia CSS) Simbiosis de opacidad CSSPor simbiosis me refiero a combinar diferentes estilos para diferentes navegadores en una regla CSS para lograr el efecto deseado, es decir. para implementar la compatibilidad entre navegadores.
Filtro:progid:DXImageTransform.Microsoft.Alpha(opacidad=50); /* IE 5.5+*/ -moz-opacidad: 0.5; /* Mozilla 1.6 y versiones anteriores */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
De hecho, la primera y la última regla son necesarias para IE5.5+ y navegadores que entienden la opacidad de CSS3, y las dos reglas en el medio obviamente no hacen una diferencia, pero tampoco interfieren realmente (decida usted mismo si los necesita).
Simbiosis de opacidad de JavascriptAhora intentemos configurar la transparencia mediante un script, teniendo en cuenta las características de los diferentes navegadores descritas anteriormente.
Función setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Si no hay ningún elemento con el id especificado o el navegador no admite ninguna de las funciones conocidas de formas de controlar la transparencia if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 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 = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += " progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Para no sobrescribir otros filtros, use "+=" ) else // Otros navegadores elem.style = nOpacity; ) función getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // Compatible con CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 y versiones anteriores, Firefox 0.8 devuelve "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 devuelve "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ devuelve "filtro"; falso retorno; //sin transparencia)
La función toma dos argumentos: sElemId - la identificación del elemento, nOpacity - un número real de 0,0 a 1,0 que especifica la transparencia en el estilo de opacidad CSS3.
Creo que vale la pena explicar la parte de IE del código de función setElementOpacity.
Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filtros.alfa; if (oAlpha) oAlpha.opacidad = nOpacidad; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+"");
Uno podría preguntarse por qué no establecer la transparencia asignando (=) a la propiedad elem.style.filter = "..."; ? ¿Por qué se usa "+=" para agregar la propiedad de filtro al final de la cadena? La respuesta es sencilla, para no “sobrescribir” otros filtros. Pero al mismo tiempo, si agrega un filtro de esta manera por segunda vez, no cambiará los valores establecidos previamente de este filtro, sino que simplemente se agregará al final de la línea de propiedad, lo cual no es correcto. Por lo tanto, si ya hay un filtro instalado, deberá manipularlo a través de la colección de filtros aplicados al elemento: elem.filters (pero tenga en cuenta que si el filtro aún no se ha asignado al elemento, entonces es imposible para gestionarlo a través de esta colección). Se puede acceder a los elementos de la colección por nombre de filtro o por índice. Sin embargo, el filtro se puede especificar en dos estilos, el estilo corto de IE4 o el estilo IE5.5+, que se tiene en cuenta en el código.
Cambiar suavemente la transparencia de un elementoSolución lista. Usamos la biblioteca opacity.js.
img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Crea una regla para cambiar la transparencia: establece el nombre de la regla, inicia y finaliza la transparencia, como así como un parámetro opcional retardos que afectan la velocidad del cambio de transparencia fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" />
fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" />
fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />
Creo que cómo conectar la biblioteca queda claro en el ejemplo anterior. Ahora vale la pena explicar la definición de las reglas. Antes de llamar a los métodos para cambiar la transparencia sin problemas, debe definir las reglas mediante las cuales se realizará el proceso: debe determinar la transparencia inicial y final y también, si lo desea, especificar un parámetro de retraso que afecte la velocidad del proceso. de cambiar la transparencia.
Las reglas se definen utilizando el método fadeOpacity.addRule
Sintaxis: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Argumentos:
- sRuleName: nombre de la regla, establecido arbitrariamente;
- nStartOpacity y nFinishOpacity: transparencia inicial y final, números en el rango de 0,0 a 1,0;
- nDelay: retraso en milisegundos (argumento opcional, el valor predeterminado es 30).
Llamamos a la transparencia que se desvanece mediante los métodos fadeOpacity(sElemId, sRuleName), donde sElemId es la identificación del elemento y sRuleName es el nombre de la regla. Para devolver la transparencia a su estado original, utilice el método fadeOpacity.back(sElemId).
: pasa el cursor para cambiar fácilmente la transparenciaTambién señalaré que para un cambio simple de transparencia (pero no un cambio gradual), el pseudo-selector :hover es perfecto, que le permite definir estilos para un elemento cuando pasa el mouse sobre él.
a:hover img ( filtro:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) 
Tenga en cuenta que la imagen se coloca dentro del elemento A. El hecho es que Internet Explorer hasta la versión 6 entiende el pseudo-selector:hover, solo en relación a enlaces, y no a ningún elemento, como debería ser en CSS (la situación ha sido corregido en IE7).
Transparencia y texto irregular en IECon el lanzamiento de Windows XP, apareció el suavizado de fuentes de pantalla mediante el método ClearType y, con él, los efectos secundarios en IE al utilizar este método de suavizado. Respecto a nuestro caso, si se aplica transparencia a un elemento con texto cuando el método anti-aliasing ClearType está habilitado, entonces el texto deja de mostrarse normalmente (el texto en negrita, por ejemplo, se duplica, también pueden aparecer varios artefactos, por ejemplo, en en forma de guiones, texto irregular). Para corregir la situación, para IE es necesario establecer el color de fondo, propiedad CSS color de fondo, en el elemento al que se aplica la transparencia. Afortunadamente, el error se solucionó en IE7.
La transparencia en CSS es una técnica bastante de moda últimamente, lo que causa dificultades en la implementación en varios 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 enfoqueEn 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 OperaPara 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 ExplorerComo 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 jQueryPuede 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 RGBACSS3 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 HSLASimilar a la función anterior, CSS3 también le permite configurar un color semitransparente usando la función HSLA, cuyos parámetros son Tono, Saturación, Luminosidad y Canal 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.
Para controlar la transparencia de los elementos de la página, utilice la propiedad de opacidad de CSS. Según la 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 para el usuario.
Valores posiblesLa sintaxis de la propiedad de opacidad en CSS tiene este aspecto:
Selector (opacidad: 1; ) selector (opacidad: 0; ) selector (opacidad: 0,4; )
La entrada acepta valores numéricos en el rango de 0 a 1. El parámetro puede representar fracciones de uno, mientras que un punto se usa como separador para las partes enteras y fraccionarias en CSS.
Un elemento sin transparencia 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 no es cero, entonces la transparencia real se calculará como un porcentaje de algún límite superior. En una situación normal, opacidad: 1 determina la opacidad completa del elemento.
Transparencia de nodos secundarios.Sin embargo, si el elemento tiene un padre cuya transparencia es distinta de una, el cálculo cambia. Un descendiente no puede ser "menos transparente" que cualquiera de sus antepasados. El valor de la propiedad CSS de opacidad del bloque principal se convierte en el límite superior de opacidad del nodo secundario.
Padre (opacidad: 0,7; ) hijo (opacidad: 1; )
En esta situación, el elemento hijo será 30% transparente, aunque el valor de opacidad sea uno.
Ejemplo 1: Translucidez. Es necesario que el fondo principal del bloque sea visible debajo del elemento de destino.
Objetivo (fondo: negro; opacidad: 0,5;)
No sólo el fondo del bloque objetivo se vuelve traslúcido, sino también el texto.
Ejemplo 2: control de transparencia dinámica. El valor de la propiedad de opacidad CSS del bloque de destino cambia cuando pasa el cursor sobre él.
Objetivo (opacidad: 0,2;) .target:hover (opacidad: 1;)
El último ejemplo demuestra que los elementos transparentes continúan respondiendo a eventos de la página como el desplazamiento. Esto le permite utilizar javascript para controlar la propiedad de opacidad de CSS, así como utilizar mecanismos de transición y animación para cambiar suavemente el modo de visualización.
Para acceder a la transparencia desde un script, debe acceder al objeto de estilo de un elemento específico.
// obteniendo el valor de transparencia actual var opacity = element.style.opacity; // estableciendo un nuevo valor element.style.opacity = 0.4;
La desaparición suave de un bloque se puede lograr utilizando la propiedad de transición CSS:
Elemento (opacidad: 0,1; transición: opacidad 1000 ms;) elemento: hover (opacidad: 0,8; transición: opacidad 2000 ms;)
Ahora el nodo del elemento, cuando se pasa el mouse, cambiará la transparencia del 10 al 80% en un segundo, y cuando el cursor se vaya, se atenuará a su valor original en dos segundos.
La propiedad de opacidad de CSS en combinación con el mecanismo de transición le permite crear hermosos efectos.
Canal alfa en lugar de opacidadLas principales sutilezas del mecanismo de opacidad en CSS:
- su efecto se extiende no sólo al fondo del bloque, sino también a su contenido de texto, que preferiblemente se deja claro;
- Los elementos secundarios no pueden ser menos transparentes que sus elementos principales.
Si estos efectos complican la vida del maquetador, en lugar de opacidad conviene utilizar un fondo transparente simple, definiendo su valor en formato RGBA o HSLA.
