Opacidad del texto CSS

La opacidad se define en CSS como "transparencia". La opacidad del texto es el efecto de transparencia que aplicamos a cualquier texto. Tenemos dos propiedades diferentes en CSS para establecer la opacidad del texto. Para establecer la opacidad del texto, utilizaremos la propiedad "Opacidad", así como el valor alfa que determina la opacidad del texto en "RGBA". Usando la propiedad de opacidad y modificando el valor alfa en RGBA, podemos ajustar la opacidad del texto en CSS. La opacidad varía entre "0.0 "y" 1.0."El color" completamente transparente "tiene un valor de" 0.0 "Si bien el color" totalmente opaco "tiene un valor de" 1.0 ". Usaremos propiedades CSS para modificar la opacidad del texto en esta guía.

Ejemplo # 1: Uso de la propiedad de opacidad

Necesitamos algunos párrafos para usar la función de opacidad en CSS. Vamos a hacer algunos párrafos HTML aquí. Para hacerlo, primero debemos construir el archivo HTML. Visual Studio Code es el software que utilizaremos para realizar estos ejemplos. Puede hacer esto en cualquier software como el bloc de notas. Estamos haciendo algunas clases "div" con diferentes nombres en el cuerpo. Dentro de cada div, estamos creando un párrafo con el "

" etiqueta. Vamos a hacer tres divs con nombres únicos como "T1", "T2" y "T3". Estamos creando párrafos dentro de estos divs. Como resultado, se han creado tres párrafos. También usaremos este código HTML para otros ejemplos. Ahora iremos al archivo CSS y aplicaremos la opacidad CSS al texto. En el elemento "Cabeza" del código HTML, también vinculamos el archivo CSS a esta página HTML.

Establecimos el color "rojo" original en el encabezado usando la propiedad "color" y diseñamos este encabezado como "cursiva". Luego, usamos el nombre del primer div "T1" en el que tenemos un párrafo y establecemos su "tamaño de fuente" en "16px". Usamos el "rojo" para la fuente "color". Pero en la siguiente línea, estamos utilizando la propiedad de "opacidad". Entonces, cuando usamos esta propiedad, agregará algo de opacidad al efecto de transparencia de nuestro color de texto. Aquí, estamos configurando un "0.Valor de 8 "a esta propiedad de" opacidad ". Para el próximo "Div.T2 "Párrafo, establecemos el mismo" tamaño de fuente "" 16px "y el mismo" color "rojo" "color". Pero esta vez el valor de la "opacidad" se cambia a "0.5 "para el párrafo del segundo div. Para el tercero y el último "div.T3 ", estamos usando" 0.3 "como el valor de" opacidad ".

Aquí está la salida, vea que el color del texto aparece con diferentes valores de opacidad. El color del encabezado es el color rojo original, pero el color de los párrafos aparece con algunos valores de opacidad. Los tres párrafos tienen diferentes valores de opacidad.

Ejemplo # 2: Uso del valor alfa en RGBA

Aquí, vamos a utilizar los valores RGBA en los que "A" es para el valor alfa y este valor alfa establece la opacidad del texto. Primero, simplemente ponemos el valor RGB en el encabezado y el valor RGB que estamos usando aquí representa el color "púrpura". Luego, usamos la palabra clave "cursiva" para establecer el "estilo de fuente" del encabezado. También lo establecemos como "Font-Family" y utilizamos la fuente "Argeliana" para esto. Está alineado en el "Centro" utilizando la propiedad "Alineación de texto".

Entonces, vamos a utilizar el primer "Div.T1 "y use el valor" RGBA ". Aquí, ponemos el valor "RGB" del color púrpura y luego establecemos su valor alfa también en "0.9 ". Después de esto, establecemos el mismo valor "RGB" pero cambiamos el valor alfa y lo establecemos en "0.7 ". Además, tenemos otro párrafo div y para este último "Div.T3 "Párrafo, usamos el" 0.Valor alfa de 5 "que establece su opacidad a" 0.Valor de 5 ".

Observe en el resultado cómo cambia el color del texto según el valor alfa. El color del encabezado es el morado original. Pero el color de los párrafos tiene algunos valores alfa que establecen su opacidad. Los valores de opacidad en los tres párrafos son diferentes.

Ejemplo # 3:

Primero, vamos a establecer el "color de fondo" de todo el cuerpo y establecerlo en "negro". Luego, nuevamente usamos valores RGBA donde "A" significa valor alfa. Este valor alfa determina la opacidad del texto como se discutimos anteriormente. Para comenzar, simplemente agregamos el valor RGB al encabezado, el número RGB que estamos usando aquí simboliza el color "gris claro". Estamos usando el primer "div.T1 "y el valor" RGBA "donde estamos insertando el valor" RGB "del mismo color que el encabezado y establece su valor alfa en" 0.7 ". Después de eso, establecemos el mismo valor "RGB" que antes. Esta vez, cambiamos el valor alfa a "0.4 ". También tenemos otro párrafo div y usamos el "0.Valor alfa de 2 "para cambiar la opacidad de este último" Div.T3 "párrafo a" 0.2 ".

Observe cómo el color del texto varía a medida que cambia el valor alfa. El encabezado es el color original, pero el color de los párrafos incluye valores alfa que determinan su opacidad. Los tres párrafos tienen valores de opacidad distintos.

Ejemplo # 4:

Estamos creando nueve clases de div diferentes aquí con un nombre único para cada DIV y aplicaremos todos los valores de opacidad en cada DIV por separado en CSS.

Estamos diseñando todo el cuerpo y estableciendo el texto en el "centro" de la página. Entonces, todos los párrafos aparecen en el "Centro". También establecemos "en negrita" para todo "cuerpo" usando "Font-Weight" y establecemos el tamaño de la fuente o el texto en "20px". Nuestro encabezado aparecerá en el color original "Maroon", ya que estamos configurando este color en la propiedad "color". El "argelino" es la "familia de fuentes" para el encabezado. Establecemos el mismo color para todos los divs usando la propiedad "color". En todos los párrafos de Div, hemos cambiado el valor de la "opacidad". En cada DIV disminuimos el valor de la opacidad por uno de otros para otros divs, establecemos el valor de la "opacidad" a "0.9 ". Luego, para el siguiente DIV estamos estableciendo el valor de esta propiedad de opacidad en "0.8 ". Para el tercer div, estamos usando "0.Valor de opacidad de 7 "y así sucesivamente. De esta manera, estamos cambiando los valores de opacidad cada vez para cada div.

Aquí, mire la salida a continuación, los valores de opacidad del texto comienzan desde “0.9 "y terminar en" 0.1 ". El color original también se usa aquí para el encabezado y todos los párrafos contienen valores de opacidad.

Conclusión:

Hemos creado esta guía para usted en la que cambiamos la opacidad del texto y aprendemos cómo modificar la opacidad del texto en CSS. Hemos explicado aquí que la opacidad se usa para dar un efecto transparente al texto. También hemos explorado las propiedades de CSS por las cuales podemos cambiar la opacidad del texto. Hemos descrito y demostrado cómo usar la propiedad de "opacidad" y el valor "alfa" de RGBA para cambiar la opacidad del texto.