CSS Color Transparente - ¿Cómo funciona el color transparente en CSS?

• Introducción a CSS Color Transparente
• Color de fondo y propiedades de color con valor transparente
• Color de fondo y propiedades de color con valores RGBA

¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!

Introducción a CSS Color Transparente

El color transparente en CSS hace que los elementos de fondo sean visibles desde otro elemento superior de la página. El color transparente se puede aplicar con la propiedad de color de fondo y el color. Si tomamos el color de fondo como transparente, hace que los elementos de la parte trasera del fondo sean completamente visibles. Pero en tiempo real no queremos que necesitemos colores semitransparentes. La característica semitransparente se puede lograr a través del valor rgba con color de fondo y propiedad de color.

Uso en tiempo real: Si el cliente quiere que el color de fondo de su página o el color del texto sea más claro que el color real o si quiere ver las cosas desde la parte superior del elemento luego usamos color de fondo transparente y propiedades de color con valores rgba.

¿Cómo funciona el color transparente en CSS?

Como comentamos, el color transparente se puede aplicar con el color de fondo y las propiedades de color.

Abajo están las sintaxis dadas,

Sintaxis 1:

div { color de fondo: transparente; }

El color de fondo con valor transparente hace que el color de fondo sea completamente transparente (desaparece)

Sintaxis 2:

div { color de fondo: rgba(valor1, valor2, valor3, valor4); }

• Valor1: Da color rojo entre 0 y 255 o 0 y 100 %
• Valor2: Da color verde entre 0 a 255 o 0 a 100%
• Valor3: Da color azul entre 0 a 255 o 0 a 100%
• Value4: Es un parámetro alfa que da transparencia entre 0 y 1. 0 significa completamente transparente y 1 significa completamente opaco.

Podemos configurar el color de fondo en rojo, verde y azul con el porcentaje de visibilidad requerido.

Sintaxis 3:

div { color: transparente; }

El color del texto con valor transparente hace que el color sea completamente transparente (desaparece).

Sintaxis 4:

div { color: rgba(valor1, valor2, valor3, valor4); }

Podemos establecer el color del texto en rojo, verde y azul con el porcentaje de visibilidad requerido.

Ejemplos de CSS Color Transparente

Abajo están los ejemplos de CSS:

Ejemplo 1

Color de fondo y color con valor transparente:

Código HTML:

Color transparente
Color de fondo y propiedades de color con valor transparente
hola soy de color de fondoHola, estoy con color de fondo y valor transparente.hola soy con color de textoHola, estoy con color de texto y valor transparente.

Código CSS:

topBColor { tamaño de fuente: 30px; ancho: 500px; color de fondo: azul; margen: 10px; borde: 10px marrón doble; } .tBColor { tamaño de fuente: 30px; ancho: 500px; color de fondo: transparente; margen: 10px; borde: 10px marrón doble; } .topColor { tamaño de fuente: 30px; ancho: 500px; color marrón; margen: 10px; margen: 10px; borde: 10px marrón doble; } .tColor { tamaño de fuente: 30px; ancho: 500px; color: transparente; margen: 10px; margen: 10px; borde: 10px marrón doble; }

Salida antes de transparente:

Salida después de transparente:

Explicación:

En el código anterior primero y 3^{rd párrafos tomados propiedades de fondo y color tomadas sin transparente respectivamente. Entonces, en la salida final, estas salidas de 2 párrafos no se pueden cambiar.}

Mientras que en 2^nd y el color de fondo del último párrafo y el color se han tomado con transparencia respectivamente. Entonces, en el resultado final, estos 2 párrafos cambiaron. Debido a que la propiedad transparente proporciona una transparencia del 100%, el color de fondo en el párrafo 2^{nd y el texto en el último párrafo desaparecen.}

Ejemplo 2

Color de fondo y color con valores rgba:

Código HTML:

Color transparente
Color de fondo y propiedades de color con valores RGBA
Hola, soy RED sin color de fondo transparente.Hola, soy ROJO con color de fondo transparente por color RGBAHola, RED no tengo color de texto transparente.Hola, estoy con color de texto transparente por valor RGBAHola, soy VERDE sin color de fondo transparente.Hola soy VERDE con color de fondo transparente por color RGBAHola, soy VERDE con color de texto transparente por valor RGBAHola, soy VERDE con color tex transparente por valor RGBAHola, soy VERDE sin color de fondo transparente.Hola soy VERDE con color de fondo transparente por color RGBAHola, soy VERDE con color de texto transparente por valor RGBAHola, soy VERDE con color tex transparente por valor RGBA

Código CSS:

redB { tamaño de fuente: 30px; ancho: 500px; color de fondo: rojo; margen: 10px; borde: 10px marrón doble; } .redBCR { tamaño de fuente: 30px; ancho: 500px; color de fondo: rgba(255,0,0,0.4); margen: 10px; borde: 10px marrón doble; } .redC { tamaño de fuente: 30px; ancho: 500px; color rojo; margen: 10px; borde: 10px marrón doble; } .redRC { tamaño de fuente: 30px; ancho: 500px; color:rgba(255,0,0,0.4);; margen: 10px; borde: 10px marrón doble; } .greenB { tamaño de fuente: 30px; ancho: 500px; color de fondo: verde; margen: 10px; borde: 10px marrón doble; } .greenBCR { tamaño de fuente: 30px; ancho: 500px; color de fondo: rgba(0,255,0,0.4);; margen: 10px; borde: 10px marrón doble; } .greenC { tamaño de fuente: 30px; ancho: 500px; color verde; margen: 10px; borde: 10px marrón doble; } .greenRC { tamaño de fuente: 30px; ancho: 500px; color:rgba(0,255,0,0.4);; borde: 10px marrón doble; } .blueB { tamaño de fuente: 30px; ancho: 500px; color de fondo: azul; margen: 10px; borde: 10px marrón doble; } .blueBCR { tamaño de fuente: 30px; ancho: 500px; color de fondo: rgba(0,0,255,0.4); margen: 10px; borde: 10px marrón doble; } .blueC { tamaño de fuente: 30px; ancho: 500px; color marrón; margen: 10px; borde: 10px marrón doble; } .blueRC { tamaño de fuente: 30px; ancho: 500px; color:rgba(0,0,255,0.4);; margen: 10px; borde: 10px marrón doble; }

Salida:

Explicación:

En el ejemplo anterior, color de fondo sin valor de propiedad rgba y color de fondo con valor de propiedad rgba. En el ejemplo anterior, color de texto sin valor de propiedad rgba y color de texto con valor de propiedad rgba. El resultado anterior distingue claramente lo que sucede si aplicamos el valor rgba al color y al color de fondo. rgba cambia el color entre 0 y 1 valor. 0 significa totalmente transparente y 1 significa totalmente opaco.

Ejemplo 3

El color de fondo con valor transparente hace que la imagen de fondo sea visible:

Código HTML:

Color transparente

Código CSS:

"cuerpo { fondo: url(m1.jpg.webp) aqua; } div { color de fondo: gris; borde: 10px granate sólido; relleno: 40px; margen: 40px; } .segundo { color de fondo: transparente; }"

Salida:

Explicación:

En el código anterior, el primer encabezado se toma sin transparencia, por lo que la parte de fondo no es visible, pero el segundo encabezado se toma con transparencia, por lo que la parte de la imagen de fondo es completamente visible (transparente da 100% de transparencia).

Conclusión

El color transparente se puede aplicar con el color de fondo y las propiedades de color, y el color de transparencia también se puede lograr mediante el valor de la propiedad rgba.

¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!