CSS transparente. Cómo configurar la transparencia en CSS - bloque transparente. Atributos de opacidad y filtro.

Con la llegada de CSS3, el trabajo de los diseñadores de diseño se ha vuelto más simple y lógico en muchos sentidos: después de todo, ahora puedes configurar de manera verdaderamente flexible cualquier objeto, recurriendo cada vez menos a JavaScript. Digamos que necesita ajustar la transparencia del fondo: CSS ofrece inmediatamente varias opciones.

El fondo se especifica mediante un conjunto de atributos (repetición de fondo, archivo adjunto de fondo, origen de fondo, clip de fondo, color de fondo), y cada uno de ellos se puede especificar por separado o combinarse en atributo de fondo. Veamos cada uno de ellos con más detalle.

atributo de color de fondo

Incluso IE8 admite este método. Se utilizan varias imágenes como fondo cuando diseño de goma. Lo principal es que al utilizar cualquier imagen, no olvides especificar también colores CSS fondo, ya que es posible que los usuarios simplemente no carguen la imagen.

atributo de posición de fondo

Si usa una imagen para establecer el fondo de un bloque, CSS le permitirá colocar la imagen en cualquier lugar de la pantalla. Por defecto, la imagen se encuentra a la izquierda. esquina superior. El atributo acepta indicaciones verbales (arriba, abajo, izquierda, derecha) o numéricas (porcentajes, píxeles y otras unidades de medida). En este caso, debe especificar dos valores: horizontal y verticalmente:

cuerpo (posición de fondo: centro derecho;): en este ejemplo, el fondo se ubicará en el lado derecho de la página y las distancias desde la parte inferior y superior a la imagen son las mismas.

atributo de tamaño de fondo

A veces es necesario utilizar CSS para estirar el fondo o reducir su tamaño. Para hacer esto, use el atributo de tamaño de fondo y el tamaño del fondo se puede configurar en píxeles o porcentajes, o en cualquier otra unidad de medida.

Hay algunos problemas con este atributo: para mostrar el fondo correctamente en versiones anteriores de navegadores, se deben utilizar prefijos. Ciertamente, versiones actuales apoyan plenamente este atributo y la necesidad de propiedades específicas ha desaparecido.

atributo de adjunto de fondo

Este atributo especifica el comportamiento imagen de fondo al desplazarse. Por lo tanto, puede tomar 3 valores (sin tener en cuenta la herencia, que es común a todos los atributos presentados en este artículo):

• fijado— deja la imagen inmóvil contra el fondo;
• voluta— el fondo se desplaza junto con otros elementos;
• local— la imagen de fondo se desplaza si el contenido se desplaza. Se corrige el fondo que se extiende más allá del contenido.

Ejemplo de uso:

cuerpo (adjunto de fondo fijo).

Actualmente Hora de Firefox no admite la última propiedad (local).

atributo de origen de fondo

Este atributo es responsable del posicionamiento del elemento. Navegadores versiones anteriores requieren el uso de prefijos. La propiedad en sí tiene tres parámetros:

• caja de relleno coloca el fondo con respecto al borde, teniendo en cuenta el grosor del marco;
• cuadro de borde se diferencia de la propiedad anterior en que la línea del borde puede superponerse total o parcialmente al fondo;
• cuadro de contenido Posiciona la imagen vinculándola al contenido.

Si se especifican varios valores, los navegadores pueden reaccionar de manera diferente: Firefox y Opera solo aceptan la primera opción.

atributo de repetición de fondo

Por regla general, si el fondo lo da una imagen, conviene repetirla en horizontal o en vertical. Para esto se utiliza el atributo de repetición de fondo. Por tanto, el fondo de un bloque cuyo CSS contiene dicha propiedad puede tener uno de varios parámetros:

• no repetir— la imagen aparece en la página en una única versión;
• repetir— el fondo se repite a lo largo de los ejes x e y;
• repetir-x- sólo horizontalmente;
• repetir-y- sólo verticalmente;
• espacio— el fondo se repite, pero si el espacio no se puede llenar, aparecen vacíos entre las imágenes;
• redondo— la imagen se escala si no es posible llenar toda el área con imágenes completas.

Ejemplo de uso de atributos:

cuerpo (repetición de fondo: repetición sin repetición)- similar repetición de fondo: repetición-y.

En CSS3, es posible establecer valores para varias imágenes si enumera los parámetros separados por comas.

atributo de clip de fondo

Este atributo define el comportamiento del fondo bajo los bordes (por ejemplo, en el caso de bordes punteados):

• caja de relleno— el fondo se muestra estrictamente dentro del bloque;
• cuadro de borde- la imagen encaja en el marco;
• cuadro de contenido— la imagen de fondo aparece sólo dentro del contenido.

Ejemplo de uso:

cuerpo (clip de fondo: cuadro de contenido;).

Chrom y Safari requieren el prefijo -webkit-.

Atributos de opacidad y filtro.

El atributo de opacidad le permite establecer la transparencia del fondo; la propiedad CSS funcionará en todos los navegadores. El valor se puede establecer entre 0,0 y 1,0 inclusive. Con esto puedes configurar la transparencia. fondo css sin valor entero: en lugar de 0,3 basta con escribir.3:

.block (imagen de fondo: url(img.png); opacidad: .3;).

Para configurar la transparencia del fondo, cuyo CSS funcionará incluso para IE por debajo de la versión 9, use el atributo de filtro:

.block (imagen de fondo: url(img.png); filtro: alfa(opacidad=30);).

En este caso, el valor de opacidad se establece entre 0 y 100. Tenga en cuenta que el atributo de opacidad es diferente de la configuración de transparencia con usando RGBA herencia: cuando se usa opacidad, no solo el fondo, sino también todos los elementos dentro del bloque se vuelven transparentes.

Supervise siempre las estadísticas de uso del navegador para la CEI y todos los demás países. lo mas gran problema Todos los diseñadores de diseño tienen versiones antiguas de IE, que no permiten el uso completo de CSS3. Al codificar, no olvide utilizar servicios especiales, que comprueba si su navegador admite una propiedad CSS en particular. Si no puede instalar versiones anteriores de navegadores, busque un servicio que verifique el funcionamiento del sitio en diferentes navegadores en línea.

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 agregar varios elementos transparencia de la página y lograr compatibilidad total entre navegadores, es decir el mismo trabajo este efecto 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. Ud. de esta propiedad Existen valores del 0 al 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.

Propiedad de opacidad CSS3 compatible los siguientes tipos Navegadores Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Ópera 9+.

Que buen navegador :) Explorador de Internet hasta la versión 9.0 no admite la propiedad de opacidad y para crear transparencia para este navegador debe usar 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.

Acerca de Navegador Firefox antes de 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. ciertos elementos, que se utilizan 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.

Muchas veces es necesario hacer imagen transparente o cualquier otro elemento en el momento en que el cursor se encuentra sobre él. Esto se puede hacer con ayuda CSS pseudoclase: flotar. 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:

Para controlar la transparencia de los elementos de la página, utilice la propiedad opacidad CSS. Según la especificación, es aplicable a nodos de cualquier tipo y es compatible con todos navegadores modernos. Con su ayuda, puede crear un diseño interesante o implementar una interacción interactiva conveniente para 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; )

La entrada acepta valores numéricos en el rango de 0 a 1. El parámetro puede representar fracciones de una unidad, mientras que un punto se utiliza como separador decimal 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.

Ejemplos de uso

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 dinámico transparencia. 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;)

Transparencia dinámica

El último ejemplo demuestra que elementos transparentes continuar 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 cambio suave modo de visualización.

Para acceder a la transparencia desde un script, debe acceder al objeto de estilo elemento específico.

// obteniendo el valor de opacidad 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 opacidad

Las 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.

Buenos días, expertos en desarrollo web, así como novatos. Para aquellos que no siguen las tendencias informáticas, o más bien la moda web, me gustaría informarles solemnemente que esta publicación trata sobre el tema: “Cómo hacer un bloque transparente herramientas css» justo a tiempo para ti. 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 eso, en este artículo te contaré todo. métodos existentes Creando transparencia, a partir de soluciones antediluvianas, me centraré en la compatibilidad de las soluciones con los navegadores y también daré ejemplos específicos. código de programa. ¡Ahora manos a la obra!

Método 1. Antediluviano

¿Cuándo todavía estaban allí? computadoras débiles y las "habilidades" no están desarrolladas, los desarrolladores han ideado su propia forma de crear un fondo transparente: usando píxeles transparentes turnándose con los de colores. De este modo bloque creado cuando se escalaba parecía un tablero de ajedrez, pero en tamaño regular parecía una cierta transparencia.

Esta "muleta", en mi opinión, sin duda ayuda en versiones anteriores de navegadores que no funcionan. soluciones modernas. 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. Dado formato gráfico le 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

Los más comunes y todos. método conocido hacer que algún bloque sea transparente es una 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).

Antes de eso, les dije que RGB es uno de los populares modelos de color, donde R es responsable de todos los tonos de rojo, G – tonos de verde y B – tonos de azul.

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

Ventaja principal último método– el canal alfa no afecta a los objetos ubicados dentro del bloque estilizado.

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

• Ópera versión 10;
• Internet Explorer 9;
• Safari 3.2;
• 3 versiones de Firefox.

quiero notar 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%.

¿Quieres aprender a crear páginas con originales y brillantes? diseño moderno? El uso de elementos traslúcidos puede ayudarte a solucionar este problema. no es una tarea fácil. Hoy veremos los principales. formas practicas establecer la transparencia de los elementos estructurales.

¿Cómo configurar la transparencia?

si consideramos este tema A través del prisma del desarrollo histórico de las tecnologías web, se pueden distinguir los siguientes enfoques:

• Propiedad opacidad.
• Uso PNG-fotos
• Formato del sistema RGBA
• Bueno, y por último, imágenes antiguas o a cuadros.

Propiedad de opacidad CSS

Aplicando estilo CSS propiedades opacidad le permite establecer la transparencia del elemento al que se aplica. Los valores que se pueden utilizar como argumento van de 0 a 1.
Veamos un ejemplo.

< html> < head> < title>TODO proporciona un título < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >Habrá mucho de tu texto aquí.

/* Fondo para el cuerpo de la página */). transparente (relleno: 10px;/*Sangría de texto*/ fondo: turquesa oscuro;/* Establece el color de fondo */ margen: 0 automático;/* Centrar el bloque */ ancho: 50%;/* Establece el ancho del bloque */ opacidad: 0,7;/* Establecer transparencia */

fuente: 48px/64px Times New Roman;

texto- alinear: justificar;

1. ) Como resultado, obtuvimos un bloque translúcido:
2. ¡¡¡Importante!!! Opacidad toma valores del rango: 0 (transparencia total) – 1 (opacidad). ) no es compatible. La siguiente línea ayudará a lograr la misma visualización del elemento:

   filtro: alfa(Opacidad= 70);

   Vale la pena tomar en cuenta que la propiedad filtrar desaparecido de HTML especificaciones, cambia los valores de 1 a 100 y solo se puede aplicar a elementos:

   • Con posicionamiento absoluto (posición: absoluta)
   • con fijo tamaño lineal (alto o ancho).
3. El grado de transparencia lo heredan los elementos secundarios y elemento hijo Puedes aumentar la transparencia, pero no puedes reducirla. Es decir, en fondo translucido NO texto TRANSPARENTE no lo hagas.

Para una mejor comprensión del material del último párrafo, en el ejemplo anterior estableceremos el color del texto en blanco.

color: blanco;

y míralo bajo un microscopio:

Como puede ver, el contenido de nuestro bloque (texto) también se ha vuelto traslúcido. Pero, ¿qué pasa si, en la práctica, no nos interesa la transparencia del contenido, sino sólo la transparencia del fondo? En este caso, pase al siguiente punto.

Usando imágenes PNG

Una característica interesante del formato. PNG es que tiene 256 niveles de transparencia. Creo que ha captado el hilo de sus pensamientos y probablemente ya haya creado un algoritmo sobre cómo funciona este enfoque. Todo lo que puedo hacer es expresarlo.

Como resultado, recibimos un bloque con fondo transparente y contenido opaco:

texto- alinear: justificar;

1. A diferencia de la propiedad opacidad la transparencia se establece sólo para el fondo
2. Compatibilidad entre navegadores. Funciona en casi todos los navegadores, lo cual es una ventaja. Pero la transparencia PNG no soportado en IE6. Si optimiza su sitio para tal antigüedad, tendrá que utilizar otros métodos o scripts.
3. Cuando apagas la visualización de imágenes, tu fondo desaparecerá (ten en cuenta este punto al optimizar la visualización en dispositivos móviles, después de todo internet ilimitado No siempre lo tengo a mano).
4. Para cambiar el color y/o la transparencia que necesitas crear nueva foto y volver a subirlo al servidor.

Formato del sistema RGBA

Uno de los más métodos modernos cambiar la transparencia del fondo es la aplicación del sistema RGBA.

RGBA– un sistema para representar el color usando tres canales estándar RGB(rojo, verde, azul), y el cuarto, el llamado Alfa-canal que caracteriza el grado de transparencia.

fondo: rgba(r, g, b, a);

En el ejemplo que ya conocemos, reemplazaremos el contenido en CSS archivo a lo siguiente:

cuerpo (fondo: url(./ vaden- pro- logo.png); /* Imagen de fondo */ ). prozrachen (relleno: 10px; fondo: rgba(0, 206, 209, 0.7); margen: 0 automático; ancho: 50%; fuente: 48px/ 64px Times New Roman; color: blanco; alineación de texto: justificar;)

texto- alinear: justificar;

1. A diferencia de la propiedad opacidad la transparencia se establece solo en el fondo
2. A diferencia del método PNG imágenes, para cambiar el color o grado de transparencia solo necesitamos cambiar los valores rgba.
3. Compatibilidad entre navegadores. Funciona en todos los navegadores modernos (desde IE9, Op10, Fx3,SF3.2).Para navegadores más antiguos tendrás que sacrificar la transparencia o utilizar opacidad, png métodos.

Imágenes accidentadas, o con respecto a la historia.

Este método estuvo en los orígenes del diseño web y vio navegadores muy, muy antiguos que realmente no podían hacer nada. radica en crear fondo a cuadros, en el que se alternaban cuadrados de colores con cuadrados transparentes.

Como resultado del uso de una imagen así en como fondo Se obtuvo un fondo pseudotransparente.

texto- alinear: justificar;

1. Al ver texto en un fondo así, sus ojos pueden cansarse rápidamente (las ondulaciones al desplazarse son especialmente opresivas).
2. De lo contrario, las funciones de la aplicación son similares al método de "imagen PNG".

¿Resumamos?

• Debajo del bloque transparente debe haber una imagen brillante y no monótona. En fondo liso Se pierde el punto culminante de la transparencia.
• Al elegir un enfoque práctico específico, guíese por los navegadores que utiliza. público objetivo. La compatibilidad entre navegadores es importante.