Establecer opacidad de fondo en CSS

1. Utilice la propiedad opacity para crear un color transparente en CSS
2. Utilice la función rgba() para crear un color transparente en CSS
3. Utilice valores hexadecimales para crear un color transparente en CSS

En este artículo, presentaremos tres métodos para crear colores transparentes en HTML usando CSS. Establecerá la opacidad del fondo en CSS.

Utilice la propiedad opacity para crear un color transparente en CSS

La opacity es una de las propiedades utilizadas en CSS, especialmente con los colores. Podemos utilizar valores entre 0 a 1 para mostrar la opacidad del color o de un elemento. Si el valor es 1, significa que el color es 100% opaco. Significa que el color no es transparente en absoluto. Si disminuimos el valor inicialmente, el elemento se volverá más transparente. Si el valor de opacity es 0.5, el color se volverá semitransparente o 50% transparente. Sin embargo, al usar opacity, el elemento hijo también se vuelve transparente.

Por ejemplo, cree un documento HTML con un encabezado h1 y una clase transparent. Establezca el color de fondo como #cc33ff y el valor de opacity 0.4 después de seleccionar la clase transparente en CSS. Si queremos que el encabezado y su color de fondo se vuelvan más transparentes, podemos disminuir el valor de opacidad.

El siguiente ejemplo muestra que el color de fondo y el título h1 se vuelven transparentes mientras mantenemos el valor de opacity, es decir, 0.4.

Código de ejemplo:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #cc33ff;
    opacity: 0.4;
}

Utilice la función rgba() para crear un color transparente en CSS

La función rgba() define colores utilizando el modelo rojo-verde-azul-alfa. El rbg en la función rbga() significa valores de color para rojo, verde y azul, mientras que a significa la opacidad del color. Cada parámetro (rojo, azul, verde) define la intensidad del color entre 0-255. Mientras que el valor de a debe estar entre 0-1. Por ejemplo, rgba(255, 100, 100, 0.4). Cuanto menor sea el valor de a, más transparente será el color. El elemento hijo no se vuelve transparente, a diferencia del de la propiedad opacity. Si el valor de a es 0.5, el color será semitransparente o 50% transparente.

Por ejemplo, cree un documento HTML con el encabezado h1 y la clase transparente. Escriba el texto Hello World entre la etiqueta del encabezado. Utilice la función rgba() para darles color de fondo a la clase. Ponga el valor de rgba como rgba(255, 100, 100, 0.4). Disminuya el valor de a para hacerlo más transparente y aumente el valor de a para hacerlo más opaco.

El siguiente ejemplo muestra que el color de fondo del encabezado se vuelve transparente cuando ponemos el valor de a como 0.4. Sin embargo, el elemento hijo heading no se vuelve transparente.

Código de ejemplo:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: rgba(255, 100, 100, 0.4);
}

Utilice valores hexadecimales para crear un color transparente en CSS

A menudo utilizamos valores hexadecimales con seis caracteres seguidos de # para dar un color específico a un elemento HTML. Por ejemplo, #A5BE32. Podemos hacer que el color sea transparente agregando dos valores numéricos al final del valor hexadecimal y convirtiéndolo en un valor hexadecimal de ocho caracteres. Por ejemplo, #A5BE3280. Aquí, #A5BE32 denota el color y 80 al final denota la opacidad del color. Si desea un color 50% transparente, puede utilizar el valor 80 al final del código hexadecimal. Dado que la escala es 0-255 en colores RGB, la mitad sería 255/2 = 128, que convertido a hexadecimal se convierte en 80. El elemento hijo no se vuelve transparente, a diferencia del de la propiedad opacity.

Por ejemplo, cree un documento HTML con el encabezado h1 y la clase transparente, es decir, <h1 class="transparent">Hello world </h1>. Dar color de fondo #A5BE32 a la clase. Agregue 80 al final del código hexadecimal para que sea 50% transparente. De modo que el código hexadecimal se convierte en #A5BE3280.

El siguiente ejemplo muestra que el color de fondo del encabezado se vuelve 50% transparente cuando agregamos 80 al final del código hexadecimal.

Código de ejemplo:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #A5BE3280
}