Hablemos del uso avanzado de los atributos RGBA que actualmente se utilizan ampliamente en CSS3. El problema de compatibilidad de este atributo es relativamente simple. IE8 ya admite este atributo, e IE6 e IE7 también pueden admitirlo mediante hacks. RGBA es similar al atributo RBG en CSS2, excepto que el atributo RGBA tiene una definición adicional de transparencia. La explicación del atributo RGBA en el estándar CSS3 es la siguiente:
| /*Sintaxis básica*/ em { color : Rgba ( rojo , verde , azul , opacidad ) } /* Ejemplo*/ em { color : rgba ( 255 , 0 , 0 , 1 ) } /* rojo, opaco */ em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* Igual que arriba*/ |
En realidad, usar tres valores decimales del 1 al 255 para definir un color es más preciso que usar porcentajes. Los siguientes son los valores RGB de varios colores. Al usarlo, solo necesita convertir los valores hexadecimales. de 00 a FF a Decimal será suficiente.
El poder de RGBA es que se pueden presentar más colores mediante la definición de transparencia y la mezcla de colores en diferentes capas, al igual que la mezcla de pinturas. Por ejemplo, primero configuramos una imagen de fondo para la página y luego configuramos un color para el contenido en H1 de la página, por ejemplo:
|
h1 { color : rgb ( 0 , 0 , 0 ) ; color de fondo : rgb ( 255 , 255 , 255 ) ; } |
Pero, ¿cuál será el efecto si no establezco una transparencia general (atributo de opacidad) en H1?
|
h1 { color : rgb ( 0 , 0 , 0 ) ; color de fondo : rgb ( 255 , 255 , 255 ) ; opacidad : 0,5 ; } |
El efecto que vemos aquí es que todo el H1, incluido el texto, es 50% transparente. Sin embargo, la transparencia del texto afecta la lectura. Intentemos usar el atributo RGBA para configurar el color de fondo de H1 por separado.
|
h1 { color : rgb ( 0 , 0 , 0 ) ; color de fondo : rgba ( 255 , 255 , 255 , 0,5 ) ; } |
h1 { |
RGBA se puede utilizar siempre que sea necesario establecer un color, por ejemplo:
| div { color : rgb ( 0 , 0 , 0 ) ; color de fondo : rgb ( 255 , 255 , 255 ) ; borde : 10px rgba sólido ( 255 , 255 , 255 , 0.3 ) ; } |
Establezca la transparencia al 30% y un borde blanco sólido con un ancho de línea de 10 píxeles para todos los divs.
| div { color : rgba ( 255 , 255 , 255 , 0,8 ) ; color de fondo : rgba ( 142 , 213 , 87 , 0,3 ) ; } div : flotar { color : rgba ( 255 , 255 , 255 , 1 ) ; color de fondo : rgba ( 142 , 213 , 87 , 0,6 ) ; } |
Pase el mouse sobre para cambiar la transparencia.
Además, si se combinan con JavaScript, los atributos RGBA pueden crear efectos más deslumbrantes.
Cambie sus hábitos de escritura CSS
En los ejemplos anteriores puede ver que el autor ha estado usando rgb() para especificar colores en lugar de usar la forma tradicional #xxx de representación hexadecimal. Este es un método de escritura preparado para el atributo RGBA de CSS3. El uso de rgb() para especificar un color puede entenderse como que rgba() es opaco, pero la diferencia entre los dos es muy pequeña, lo que brindará una gran comodidad al actualizar a rgba. () en el futuro.
Compatible con todos los navegadores
Aunque las últimas versiones de los navegadores convencionales ya admiten atributos RGBA, también debemos cuidar a los usuarios que utilizan navegadores más antiguos, por lo que en algunos lugares estaremos más seguros usando el método antiguo. Existen varios métodos y cada uno puede elegir según sus necesidades.
Aunque esto afectará el efecto en los navegadores de versiones inferiores, este es el método más simple y seguro. Las operaciones específicas son las siguientes:
| h1 {. color : rgb ( 127 , 127 , 127 ) ; color : rgba ( 0 , 0 , 0 , 0,5 ) ; } |
Configure primero el color rgb y luego configure el color rgba, de modo que los navegadores que no admiten el atributo rgba solo muestren el color rgb, mientras que los navegadores que admiten rgba mostrarán el color rgba debido a la redefinición.
La ventaja del formato PNG es que la función de transparencia de la imagen se puede mostrar en la página web.
| h1 { fondo : URL transparente ( black50.png ) ; fondo : rgba ( 0 , 0 , 0 , 0,5 ) ninguno ; } |
El mismo efecto que rgba se logra a través de un fondo PNG con una transparencia del 50%.
puede utilizar los atributos privados de IE para resolver IE6 e IE7, que pueden lograr algunos de los mismos efectos que rgba.
| h1 { filtro :progid :DXImageTransform.Microsoft.Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ; } |
Enlace original: Uso avanzado de atributos CSS3 RGBA.
Gracias a bolo por su contribución.