Cómo hacer un bloque translúcido en html. Color y fondo transparentes en CSS. Transparencia de varios elementos.

¿Cómo configurar el color transparente en CSS? En momento actual Hay 3 formas de hacerlo.

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 se 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 configurar 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. Con la opacidad, la transparencia se establece en 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, en en este momento Estas son todas las formas que conozco de establecer 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ás, el fondo es una propiedad CSS que te 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 trabajas con editores gráficos, probablemente conozcas ese color. modo rgb descifrado de la siguiente manera: 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 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 último valor a 0,7, por ejemplo. Resultará así:

Ahora el fondo del bloque es translúcido y visible a través de él. imagen de fondo. esta foto y los antecedentes tienen únicamente fines ilustrativos. Como comprenderás, en fondo css La transparencia 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 especificar diferentes valores puedes obtener millones diferentes colores, y la translucidez le permitirán crear efectos mucho más bellos para el sitio, si es necesario.

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 es posible 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 bajo el 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 cuando utilice cualquier imagen, no olvide configurar también el color de fondo en CSS, 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 se requiere con usando CSS 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 Los navegadores 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. Los primeros navegadores requerían 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 transparente no sólo el fondo, sino también todos los elementos dentro del bloque.

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.

Propiedad opacidad CSS es responsable de la transparencia de los elementos (imágenes, texto, bloques) en html.

Sintaxis de opacidad CSS

Donde valor puede tomar valores reales en el rango de 0,0 a 1,0. Un valor de 1,0 significa que no hay transparencia (predeterminado).

Ejemplo No. 1. Imagen transparente en html.

La primera imagen se muestra sin transparencia, la segunda con transparencia 0,5

Translucidez del elemento

¡Haz que la imagen sea translúcida al pasar el mouse!

DemostraciónDescargar fuentes

¡Gracias por su atención!

Artículo siguiente
como crear bloque div con desplazamiento?

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 posibles

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

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; en este caso se nota la transparencia; Este efecto se logra de diferentes maneras y si recuerdas todo, incluidos los métodos antiguos, entonces este es el uso imagen PNG como fondo, creación 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 un inconveniente desagradable. lo haré breve reseña para dejar claro lo que queremos decir estamos hablando de, así como para aquellos lectores que no están familiarizados con opciones no tradicionales para crear un efecto translúcido.

PNG como fondo

EN editor gráfico Se prepara previamente un patrón translúcido de un solo color y se guarda en formato PNG-24 (Fig. 1). Una característica especial de este formato es que admite 256 niveles de transparencia o, en pocas palabras, puede mostrar imágenes translúcidas.

Arroz. 1. Imagen para crear el fondo

Luego agregamos la imagen como fondo a través de la propiedad de fondo, como se muestra en el ejemplo 1.

Ejemplo 1: usar un patrón translúcido

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Resultado este ejemplo mostrado en la Fig. 3.

Arroz. 2. Aplicar una imagen de fondo

El navegador heredado Internet Explorer 6 no funciona con translucidez en PNG-24; si por alguna razón necesita admitir este navegador, tendrá que usar scripts para ello.

El método anterior tiene una serie de limitaciones. Entonces, cuando desactivas las imágenes en el navegador, el fondo desaparecerá por completo. Además, no es tan fácil cambiar el color de fondo y el valor de transparencia, para ello tendrás que editar la imagen nuevamente;

imagen a cuadros

Este método se refiere a métodos completamente antiguos para implementar la translucidez, cuando los navegadores "no podían hacer nada" y era necesario buscar soluciones no estándar. El truco consiste en crear una imagen que alterne entre píxeles transparentes y opacos (Figura 3). Esta estructura regular crea un efecto translúcido, esencialmente imitándolo.

Arroz. 3. Patrón de cuadros ampliado

Así es como se ve al final (Fig. 4).

Arroz. 4. Simular la translucidez

Las desventajas de este método son comparables a las del anterior; también puede aparecer un patrón muaré y el texto se deteriorará.

propiedad de opacidad

La propiedad de opacidad de CSS 3 especifica el valor de transparencia y varía de 0 a 1, donde cero es la transparencia completa del elemento y uno, por el contrario, es opaco. La propiedad de opacidad tiene una característica especial: la transparencia se aplica a todos los elementos secundarios y no pueden exceder el valor de opacidad de su elemento principal. Resulta que no puede haber texto opaco sobre un fondo translúcido (ejemplo 2).

Ejemplo 2: uso de opacidad

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

El campo magnético, se pudo establecer por la naturaleza del espectro, rastrea el meteorito cósmico, este día cayó en el vigésimo sexto día del mes de Carney, que los atenienses llaman Metagitnion.

El resultado del ejemplo se muestra en la Fig. 5.

Arroz. 5. Translucidez del texto y el fondo.

En las versiones de Internet Explorer hasta la 8.0 inclusive, la opacidad no funciona, por lo que utiliza la propiedad de filtro específica del navegador. Naturalmente, esto da como resultado un código CSS no válido.

RGBA

El enfoque moderno es mucho más simple y visual que los métodos anteriores y consiste en utilizar el formato RGBA para colores y fondos. Las primeras tres letras son familiares para muchos y representan rojo, verde, azul, la última simboliza el canal alfa y establece la transparencia del elemento. El formato de grabación es el siguiente.

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

Entre paréntesis, en lugar de letras, se coloca el valor del componente de color; se puede visualizar en cualquier editor gráfico; el último valor establece la transparencia y coincide con el valor de la propiedad de opacidad.

No todos los navegadores soportan este formato: Internet Explorer desde la versión 9, Opera desde la versión 10, Firefox desde la 3, Safari desde la 3.2. Pero, en general, los navegadores modernos muestran la transparencia correctamente. Para versiones anteriores de IE, puede especificar el color por separado en su formato habitual y, por supuesto, no habrá transparencia. O usarlo de nuevo propiedad de filtro, pero luego hay que aceptar que la transparencia también afectará al texto (ejemplo 3). para cumplir código válido CSS, utilicé comentarios condicionales.

Ejemplo 3: uso de RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Una gigantesca espiral estelar con un diámetro de 50 kpc, esto fue establecido por la naturaleza del espectro, ilustra perfectamente la lluvia de meteoritos, sin embargo, Don Yemans incluyó en la lista solo 82 grandes cometas.

El resultado del ejemplo se puede ver en la Fig. 6.

Arroz. 6. Fondo translúcido con texto opaco.

Compare la imagen con la anterior, las letras se han vuelto más brillantes y claras.

EN navegador de internet Explorer 7 descubrió un error al combinar el color de fondo con diferentes significados. Por ejemplo, si configura el color de fondo en rojo, como se muestra a continuación, el fondo no aparecerá en absoluto en IE7.

Div (color de fondo: rojo; /* No aplicable en IE7 */ color de fondo: rgba(255, 0, 0, 0.5); )

Esto se soluciona reemplazando la propiedad background-color con background.

Div ( background: red; /* Y esto funciona */ background: rgba(255, 0, 0, 0.5); ) Sin embargo, hay una advertencia. El validador de CSS se queja del fondo cuando se le asigna un valor en formato RGBA. Pero al mismo tiempo se refiere correctamente a color de fondo. En general, como siempre, hay que elegir entre navegadores y validez.