css - only - tooltip image html

Opacidad de CSS vs rgba: ¿cuál es mejor?

Question

Asumiendo que estás aplicando una opacidad de CSS a un color sólido. ¿Es mejor, en términos de memoria y rendimiento, usar un valor de rgba o el color + opacidad?

Answer 1

opacity solo se aplica a elementos completos, por lo que no puede aplicar un canal alfa a un color usando la propiedad de opacity . Solo puede hacer eso con la función rgba() (o hsla() ).

Entonces rgba() / hsla() es mejor en todos los aspectos porque esa es la única forma de hacerlo.

Answer 2

Al principio debes saber que rgb() es un navegador cruzado, pero elegir la transparencia entre rgba() y opacity() depende de tu caso, si tienes una división con hijos de árbol DOM y no quieres transparentar a sus hijos mejor elijo rgba() pero si es una división solitaria prefiero usar opacity() .

Porque los navegadores usan la aceleración de hardware para renderizar la opacity() . filter: alfa(opacity=x) es igual a opacity() pero es para IE8 y versiones anteriores.

El rgba() es una función que obliga a los navegadores a calcular un color, pero no a la aceleración de GPU, y si usas rgba() frecuencia en una página, tal vez tu navegador funcione bastante lento. Si usa un color simple, prefiero usar color hexadecimal, porque es un color calculado previamente y los navegadores no lo calculan y simplemente lo pintan.

Después de todo, si su caso lo convoca a utilizar rgba() pero desea la aceleración de GPU, puede usar transform: translateZ(0); , no pasa nada, pero la fuerza de su navegador para usar GPU. es un truco para un mejor rendimiento, pero no lo use con frecuencia.

Nota : la clave transparent para mapas de color a rgba (0,0,0,0). es solo una clave, no un valor exacto.

Answer 3

Como otros han declarado, rgba() y la opacity funcionan de manera diferente:

• rgba() afecta a una sola propiedad, como el color , el color background-color o el background-color border-color , de un elemento dirigido por CSS y solo de estos elementos
• opacity afecta a todas las propiedades (toda la perspectiva) de los elementos seleccionados junto con todos sus hijos con árbol DOM

Aún así, se pueden lograr muchos efectos usando cualquiera de estos y el rendimiento / compatibilidad varía, por lo que esta pregunta no es inútil.

Desde mi experiencia, usar y especialmente animar la propiedad de opacity es la manera más fácil de causar el famoso error de antialiasing de texto en los navegadores webkit (especialmente Safari, Al pasar sobre la transición de CSS en Safari se aligera el color de ciertas fuentes ). Esto se debe al hecho de que la opacity no afecta a una, sino a toda una jerarquía de elementos, y los navegadores a veces no distinguen correctamente qué elementos se vuelven a dibujar. No ocurren tales problemas cuando se usa rgba() .

Además, muchas versiones de Opera, incluida la v12.11 casi actual, producen fallas gráficas graves con algunos escenarios de uso de opacity . Mezclar opacidad con texto, fondos de imágenes y sombras de texto y luego desplazar la página o div es la forma más fácil de reproducir el problema. Un problema similar ocurrió para mí en la versión de Safari de iOS. Una vez más, no hay tales problemas con rgba() .

Estas cosas suceden por una razón. Desde el punto de vista del rendering, cuando usamos rgba() para color / background-color / border-color , le decimos al navegador explícitamente qué elementos DOM y qué capas gráficas de elementos se ven afectadas. Esto hace que sea mucho más fácil para los navegadores saber cuándo deben volver a dibujarse. Además, restringir el área de efecto es una garantía de aumento del rendimiento, que he confirmado al probar ambas opciones y darme cuenta de que el sitio web que usa rgba() en lugar de opacity nota mucho mejor, especialmente en Safari y Opera.

Claro, cosas como imágenes con desvanecimiento no se pueden lograr con rgba() ( mask-image no es lo suficientemente compatible), pero para tareas como texto o fondo simple y transparente, rgba() parece ser una mejor opción. Aún más si se mezcla con animación CSS3.

Ah, y recuerda incluir siempre una reserva cuando rgba() :

.el {
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.5);
}