Opacidad de color de fondo CSS
Ejemplo 1:
Abra el archivo HTML y cree cuatro encabezados en el archivo HTML para que podamos aplicar el color de fondo y cambiar la opacidad de color usando CSS. En este tutorial, utilizamos el estudio de código visual para ejecutar estos códigos de HTML y CSS. Creamos el archivo HTML en este software y escribimos el HTML. El código se proporciona en la siguiente imagen:
Esta es la imagen del código HTML que se menciona anteriormente. Cambiaremos la opacidad del color de fondo de todos los encabezados y le mostraremos el color con diferentes valores de opacidad.
Código CSS:
Vamos a crear un archivo CSS donde usamos la propiedad CSS para cambiar la opacidad del color de fondo de los encabezados anteriores. En este código, utilizamos la propiedad de "opacidad" de CSS.
Para encabezar 1 "H1", establecemos el "color de fondo" en "amarillo". La "opacidad" es "0.4 "para este encabezado y el color de fuente es" negro ". El encabezado 2 "color de fondo" también es "amarillo", pero la "opacidad" aquí es "0.6 ". El "color de fondo" del encabezado 3 también es "amarillo" pero esta vez, la "opacidad" es "0.8 ". Ahora, viene el encabezado 4. Su "color de fondo" es lo mismo que los encabezados anteriores, pero no usamos el color "opacidad" aquí. Entonces, el "color de fondo" del cuarto encabezado aparece como el color original "amarillo".
Producción:
La diferencia en el valor de opacidad del color de fondo se muestra en esta salida. Puedes ver la diferencia entre la opacidad del color en esta imagen.
El primer color de fondo de encabezado muestra más transparencia porque el valor de opacidad del color de fondo es "0.4 ". El segundo encabezado es menos transparente que el color de fondo del primer encabezado ya que su valor de opacidad es "0.6 ". Luego, lo mismo que el segundo encabezado, el color de fondo del tercer encabezado es menos transparente que el segundo. Esta vez, la "opacidad" es "0.8 ". Y en el último encabezado, usamos el color amarillo original sin usar ningún valor de opacidad.
Ejemplo #2:
En este código HTML, tenemos dos encabezados y cuatro párrafos. Cada párrafo está escrito dentro de la clase "Div" y estas clases "Div" se llaman "Primero", "Segundo" y "Tercero", respectivamente. Usaremos estos nombres Div cuando diseñemos estos párrafos en CSS. Cambiaremos la opacidad del color de fondo de cada párrafo.
Código CSS:
Este es el código CSS donde establecemos el color del encabezado 1 como "verde". El texto de los encabezados 1 y 2 está alineado en el "Centro" utilizando el "Align de texto". Establezca el color "Div" de fondo "verde" usando "RGB (0, 151, 19)". El "relleno" es "10px" desde la izquierda, derecha, superior e inferior. El "Text-Align" utilizado aquí es "Justificar" . Ahora, use el primer div donde cambiamos el color verde de fondo con el valor de opacidad de "0.2 "y está escrito en forma de" RGBA (0, 151, 19, 0.2) ". El "valor de opacidad" aquí es "0.2 ". El valor "alfa" representa la "opacidad". El color de fondo del segundo div también es verde con el valor alfa de "0.4 ". El valor alfa para el tercer div es "0.7 "con el mismo color verde.
Producción:
Aquí, puede ver que el primer párrafo muestra más transparencia que el segundo párrafo porque el valor alfa u opacidad para el primer párrafo es "0.2 ", lo que significa que tiene opacidad" 20%". El valor de opacidad o alfa del segundo párrafo es "0.4 "y es menos transparente que el primer párrafo. En el color de fondo del tercer párrafo, el valor alfa es "0.7 "y notarías que es menos transparente. En el último párrafo, el color de fondo es el color "verde" original. No usamos ningún valor alfa en el último encabezado.
Ejemplo #3:
Para el tercer ejemplo, vamos a escribir diferentes encabezados en HTML con la "ID" y luego usar estos "ID" para dar diferentes estilos a estos encabezados en CSS.
Código CSS:
En este código CSS, cambiaremos la opacidad del color de fondo de un color y también usaremos el color original en el siguiente párrafo. Consulte la siguiente imagen para el código CSS:
Aquí, usamos la identificación del párrafo y luego proporcionamos el color de fondo a todos los párrafos. Para "P1", establecemos el "RBGA (255, 0, 0, 0.3) "que es el código de color" rojo "con un valor alfa de" 0.3 ". Para "P11", usamos el mismo color pero sin el valor alfa u opacidad. El "P2" se establece como "RGBA (0, 255, 0, 0.4) "que es el código de color" verde "y su valor alfa es" 0.4 ". A continuación, el "P22" es del mismo color "verde" sin valor alfa. El valor RGBA "P3" es "(0. 0. 225, 0.5) "que es el color" azul "con un valor alfa de" 0.5 ". El "P33" tiene el color original "azul" y no tiene opacidad. El "P5" tiene el valor de opacidad de "0.7 "y el código de color es" RGBA (255, 255, 0, 0.7) "que representa" amarillo ". El "P55" no contiene ningún valor alfa. El color "p6" es "rosa" con un valor de opacidad de "0.8 "y el código se escribe como" RGBA (255, 0, 255, 0.8) ". El último párrafo, "P66", tiene el "color de fondo" de "rosa" sin opacidad.
Aquí, el color de fondo del primer párrafo es rojo pero con un valor de opacidad de 0.3 lo que lo hace más transparente. El siguiente párrafo contiene el color de fondo rojo original y puede observar fácilmente la diferencia entre el color original y el color cuando usamos el valor de opacidad. En el tercer párrafo, el color de fondo se muestra como verde con un valor de opacidad de "0.4 ". En el cuarto párrafo, el color de fondo es "verde" sin ningún valor alfa. Se muestra el color "azul" en el quinto párrafo y su valor de opacidad es "0.5 ". El color de fondo "azul" original también se muestra en el párrafo "sexto". El siguiente párrafo muestra un color "gris" utilizado con un "0.Valor de opacidad de 6 "y este gris original también se usa en el siguiente párrafo como color de fondo. El color "amarillo" tiene "0.Opacidad de 7 ", mientras que" Cerise "tiene" 0.8 ". Ambos colores originales también se muestran en los colores de fondo del párrafo.
Conclusión
Este tutorial se le proporciona para que pueda aprender el concepto de la opacidad del color de fondo en CSS. Aprendimos dos métodos para modificar la opacidad: uno es utilizando la propiedad "Opacidad" y el otro es utilizando "RGBA" en el que se utiliza "Alpha" para establecer el valor de transparencia del color de fondo. Mostramos los colores de fondo con opacidad o valor alfa y sin valor de opacidad en detalle. Pruebe estos ejemplos y luego use estos valores de opacidad en sus códigos.