En el desarrollo web, a menudo puede sentir la necesidad de agregar fondos transparentes. La búsqueda de la propiedad de fondo transparente en CSS no le dará ningún resultado, ya que no existe una propiedad de fondo transparente. Sin embargo, puede usar propiedades alternativas o el código de color transparente para el mismo propósito.

En este blog, aprenderemos sobre establecer el color de fondo transparente en CSS.

Cómo establecer el color de fondo transparente en CSS?

Para establecer el color de fondo transparente, vamos a utilizar los siguientes métodos:

• propiedad de color de fondo
• propiedad de opacidad

Pasemos por cada método uno por uno!

Método 1: Uso del color de fondo para establecer el color de fondo transparente en CSS

En CSS, el "color de fondoLa propiedad se utiliza para asignar un color diferente al fondo. Además, el uso de la propiedad de color de fondo de manera específica también puede establecer la transparencia de diferentes elementos.

Ejemplo

Aquí está nuestra página HTML con dos fondos, uno como imagen y la otra como fondo del contenedor. Queremos hacer que el fondo del contenedor sea transparente para que podamos ver a través de la imagen adicional debido a la transparencia del contenedor:

En nuestro archivo HTML, hemos agregado un "

"Etiqueta con una clase llamada"BG"Dentro de un elemento div y lo colocó dentro del"" etiqueta:

Transparente

En el archivo CSS, use el "." antes "BG"Declararlo como una clase. Luego, agregue la propiedad de color de fondo junto con el valor RGBA, asigne el "100px"Rolando, y configure el color del texto como"blanco". Como el esquema de color RGBA tiene su formato adecuado, estableceremos todos sus valores en cero, excepto el último. Establezca el último valor en ".25"Para obtener un tono de transparencia. Sin embargo, se puede reemplazar "0"Tener una clara sombra de transparencia.

En el siguiente paso, asigne al Div un relleno "200px"Y establezca la URL de la imagen de fondo deseada:

Nota: No hemos eliminado el color de fondo previamente establecido como "agua". Como resultado, el fondo transparente del contenedor será claramente visible utilizando el esquema de color RGBA.

Como puede ver, hemos establecido con éxito el color de fondo transparente utilizando la propiedad de color de fondo.

Ahora, verifiquemos el método de usar otra propiedad CSS para establecer un color de fondo transparente.

Método 2: Uso de la propiedad de opacidad para establecer el color de fondo transparente en CSS

En CSS, el "opacidad"La propiedad se usa para hacer que los elementos transparentes. Sin embargo, siempre hay niveles de transparencia que se pueden especificar, como 1 - 100 (%). Por ejemplo, un elemento con "0La opacidad será completamente transparente.

Ejemplo 1

En este ejemplo, asignaremos el "0.2"Valor de opacidad para el".BG" clase. Todas las demás propiedades seguirán siendo las mismas:

Aquí, hemos establecido con éxito el fondo transparente:

Sin embargo, establecer la opacidad también aplicó el efecto de transparencia al texto agregado. Para abordar ese escenario, tomemos otro ejemplo.

Ejemplo 2

Cuando asigna un valor de opacidad, se aplica a cada elemento dentro del contenedor especificado que tiene la misma clase. Sin embargo, cambiar la clase del texto agregado puede resolver el problema establecido.

Para hacerlo, asignaremos la clase "texto" a

etiqueta y clase "BG"A la etiqueta:

Transparente

Ahora el "Transparente"El texto pertenece a una clase diferente".texto". Entonces, especificaremos su "posición"Y dale el valor"absoluto", Asigne el"margen-top"Valor de propiedad como"-9%" y "margen de pesa"Valor como"50px"Para obtener el texto en el cuadro:

.texto
Posición: Absoluto;
margen -top: -9%;
margen-izquierda: 50px;
color blanco;

Se puede ver que ahora la opacidad solo se aplica al contenedor para que sea transparente sin cambiar el texto agregado:

Hemos proporcionado las formas más fáciles de establecer el color de fondo transparente en CSS.

Conclusión

Para establecer el color de fondo transparente en CSS, puede usar el "color de fondo"Propiedad con el valor RGBA y el"opacidad" propiedad. La propiedad de color de fondo se puede usar dos veces, una para establecer el fondo original y la segunda para hacer la primera transparente utilizando el esquema de color RGBA. Sin embargo, el valor de la propiedad de opacidad se aplica a todos los elementos de la clase específica para la que se define. En este artículo, hemos cubierto dos métodos eficientes para establecer el color de fondo transparente en CSS.