Cambiar la opacidad del texto en CSS

1. Use la propiedad de opacity de CSS para cambiar la transparencia del texto en CSS
2. Utilice la función rgba() para cambiar la transparencia del texto en CSS

Este artículo presentará dos métodos para cambiar la opacidad del texto en CSS.

Use la propiedad de opacity de CSS para cambiar la transparencia del texto en CSS

La propiedad opacity indica la transparencia de un elemento. Generalmente se indica en una escala de 0 a 1, donde 0 es completamente transparente.

Eso significa que es completamente invisible. Asimismo, 1 es completamente opaco, y 0.5 puede considerarse el punto de referencia de la opacidad de los elementos, ya que es un 50 % transparente.

Por ejemplo, cree un elemento p y cree una clase before de él. Escriba el texto de su elección dentro del elemento p.

A continuación, cree un elemento p similar con la clase after. Seleccione la clase before en CSS y especifique red como color de texto.

Para la clase after, establezca el color en red y la propiedad opacity en 0.4, en una escala de 0 a 1 como desee.

De igual forma, también podemos indicar la opacidad del elemento vía porcentaje. 0% es completamente transparente y 100% es completamente opaco. También podemos usar 40% en lugar de 0.4.

Código de ejemplo:

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color:red;
}
.after {
 color:red;
 opacity: 0.4;
}

Utilice la función rgba() para cambiar la transparencia del texto en CSS

La función rgba(), por lo general, se utiliza para insertar el color al elemento. Las letras en rgba() representan rojo, verde, azul y alfa.

Indica que la función toma cuatro valores. La opción alfa es una extensión que denota la opacity del elemento.

Podemos indicar la intensidad del color rojo, azul o verde como un número entero entre 0 a 255 o 0% a 100%. Para opacity, podemos especificar el valor 0-1 y, por supuesto, el rango 0%-100%.

Podemos usar la función rgba() como opción en la propiedad color.

Usaremos la misma plantilla HTML que en el primer ejemplo anterior para una demostración. Seleccione la clase before y escriba la función rgba() en la propiedad color en CSS.

Escriba el valor 0, 0, 255 en la función, que es el código de color para el color azul. Use el mismo código de color para la clase after pero añade 0.5 para el valor de opacidad.

Como resultado, el primer texto aparece en azul, mientras que el segundo será menos opaco a medida que establezcamos la opacidad en él.

Código de ejemplo:

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color: rgba(0, 0, 255);
}

.after {
 color: rgba(0, 0, 255, 0.5);
}

Así, considerando todos los hechos, usamos la propiedad opacity y la función rgba() para cambiar la transparencia del texto.