Establecer transparencia con código hexadecimal en HTML

1. Utilice el código hexadecimal CSS para proporcionar transparencia al fondo en HTML
2. Utilice la propiedad CSS opacity para hacer que el fondo sea transparente en HTML
3. Utilice la propiedad CSS background para hacer que el fondo sea transparente en HTML

Este artículo presentará métodos para agregar transparencia a los elementos HTML. Usaremos CSS para agregar transparencia.

Utilice el código hexadecimal CSS para proporcionar transparencia al fondo en HTML

Podemos usar el código hexadecimal CSS para proporcionar transparencia a un elemento HTML. Podemos establecer el código hexadecimal como el valor de la propiedad background. El código hexadecimal que usaremos es de ocho dígitos. El formato del código hexadecimal de ocho dígitos es #RRGGBBAA. Los primeros seis dígitos representan el código hexadecimal para rojo, verde y azul, respectivamente. Los dos últimos dígitos son el código hexadecimal de opacidad.

Por ejemplo, cree un div y escriba un texto en él. En CSS, seleccione div y establezca la propiedad background en #00ff0080. El código hexadecimal #00ff00 representa el color verde y 80 representa la opacidad del color. Esto creará un fondo verde en el texto y dará una opacidad de 50% o el valor 128. El equivalente binario del valor hexadecimal 80 es 128. Por lo tanto, podemos usar código hexadecimal para crear un elemento transparente en HTML.

Código de ejemplo:

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

Utilice la propiedad CSS opacity para hacer que el fondo sea transparente en HTML

Podemos crear un fondo transparente usando la propiedad opacity en CSS. Podemos usar esta propiedad en cualquier elemento en HTML y hacer que el fondo sea transparente. La propiedad opacity establece la opacidad de un elemento. Es responsable de establecer el grado en que se oculta el contenido detrás de un elemento. El valor varía de 0.0 a 0.9. Los valores más bajos se asemejan al nivel más bajo de opacidad y viceversa. Significa que cuando el valor de opacidad está cerca de 0.0, el contenido detrás del elemento es más visible. Y el contenido parece más transparente. También podemos usar la representación % para establecer la opacidad. Va de 0% a 100%.

Por ejemplo, cree un div con la clase bg. Escriba un texto como elemento entre div. En CSS, seleccione el elemento div y establezca el fondo en amarillo usando la propiedad background-color. Luego, seleccione la clase bg usando el selector de clases. A continuación, establezca la opacity en el valor de 0.5.

El siguiente ejemplo crea un color de fondo amarillo y hay algo de texto escrito en él. El valor de opacidad 0.5 agrega cierta cantidad de transparencia al elemento. Podemos cambiar el valor de 0.0 a 1.0 para probar el grado de opacidad en el siguiente ejemplo. Por lo tanto, agregamos transparencia al color de fondo en el tutorial.

Código de ejemplo:

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

Utilice la propiedad CSS background para hacer que el fondo sea transparente en HTML

Hay un inconveniente en el uso de la propiedad opacity. El valor de opacity establecido en el elemento principal se aplica a todos los elementos secundarios. Para deshacernos de este problema, podemos usar la propiedad CSS background. Podemos especificar el valor rgba del elemento y evitar que aplique opacidad a los elementos secundarios. La propiedad background utiliza la función rgba para especificar los colores RGB con su opacidad. La sintaxis de la función se muestra a continuación.

rgba(red, green, blue, alpha)

Podemos especificar la intensidad de los valores RGB en el rango de 0 a 255. También podemos representar el valor porcentual en el rango de 0% a 100%. Podemos especificar el valor de alfa como discutimos en el primer método.

Realice algunos cambios de CSS en el ejemplo de código del primer método. En la selección de div, elimine la propiedad background-color y agregue la propiedad background. Escriba la función rgba() como el valor de la propiedad. Establezca el valor de rojo como 255 y establezca 0 para verde y azul. Escriba el valor alpha como 0.2. Luego, elimine la selección de clase bg.

Los siguientes fragmentos de código crearán un fondo rojo en el texto y agregarán un grado de transparencia.

Código de ejemplo:

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}