La transparencia del color se puede configurar a través de rgba() y hsla(), pero solo pueden configurar la transparencia al definir el color y no pueden configurar la transparencia para imágenes u otros elementos.
Dos formas de configurar la transparencia con CSS:
1. CSS rgba() establece la transparencia del color
gramática:
rgba(R,G,B,A);
RGBA es la abreviatura de las tres palabras Rojo (rojo), Verde (verde), Azul (azul) y Alfa (opacidad). Los valores de color RGBA son una extensión de los valores de color RGB, con un canal alfa, que especifica la opacidad del objeto.
Introducción a los valores en rgba():
R: valor rojo. Entero positivo (0~255)
G: valor verde. Entero positivo (0~255)
B: valor azul. Entero positivo (0~255)
R: Transparencia. El valor está entre 0~1
rgba() puede simplemente establecer la transparencia del color, lo que tiene muchas aplicaciones en el diseño de páginas. Por ejemplo: haga que el fondo sea transparente, pero el texto de arriba sea opaco.
Ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>programación dotcpp</title><style>.demo{ancho:350px;alto:300px;margin:50pxauto;}.demo*{ancho :120px;altura:120px;margen:10px;float:izquierda;}.demo1{fondo:rgba(255,0,0,1);}.demo2{fondo:rgba(255,0,0,0.5);} </style></head><body><divclass=demo><divclass=demo1>¡El color de fondo es opaco y el texto es opaco! </div><divclass=demo2>¡El color de fondo es semitransparente y el texto es opaco! </div></div></body></html>Resultados de ejecución:
En el ejemplo anterior, los valores de color establecidos son los mismos, pero la transparencia es diferente.
2. El atributo de opacidad de CSS establece la transparencia del fondo.
gramática:
opacidad:valor;
valor: especifica la opacidad, de 0,0 (completamente transparente) a 1,0 (completamente opaco).
El atributo de opacidad se hereda y hará que todos los elementos del contenedor sean transparentes;
Ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>atributo de opacidad</title><style>.demo{width:280px;height:140px;margin:50pxauto;}.demo1,.demo2 {ancho:120px;alto:120px;margen:10px;float:left;fondo:#2DC4CB;}.demo1{opacidad:1;}.demo2{opacidad:0.5;}</style></head><body> <divclass=demo><divclass=demo1><p>¡El color de fondo es opaco y el texto es opaco! </p></div><divclass=demo2><p>¡El color de fondo es transparente y el texto también es transparente! </p></div></div></body></html>Resultados de ejecución:
Opacidad:0.5; hace que todos los elementos del contenedor demo2 sean translúcidos.
Resumen: aunque tanto el método rgba() como el método de opacidad pueden lograr efectos de transparencia, rgba() solo actúa sobre el color del elemento o su color de fondo (los elementos secundarios del elemento con transparencia rgb() establecida no heredarán su efecto de transparencia); y la opacidad se hereda, no solo afecta al elemento en sí, sino que también hace que todos los subelementos dentro del elemento sean transparentes.