significa - ¿Debería usar rgba(0, 0, 0, 0) o rgba(255, 255, 255, 0) para la transparencia en CSS?

rgba transparent

Question

¿Debería usar rgba(0, 0, 0, 0) o rgba(255, 255, 255, 0) para la transparencia en CSS?

¿Cuáles son los pros y los contras de cada uno?

Answer 1

El último parámetro de la función rgba() es el parámetro "alfa" u "opacidad". Si lo establece en 0 , significará "completamente transparente", y los primeros tres parámetros (los canales red , green y blue ) no importarán porque de todos modos no podrá ver el color.

Con eso en mente, elegiría rgba(0, 0, 0, 0) porque:

1. es menos mecanografía,
2. mantiene algunos bytes adicionales fuera de su archivo CSS, y
3. Verá un problema obvio si el valor alfa cambia a algo indeseable.

Podría evitar el modelo rgba completo y utilizar la palabra clave transparent lugar, que de acuerdo con w3.org , es equivalente a "negro transparente" y debería calcularse a rgba(0, 0, 0, 0) . Por ejemplo:

h1 {
    background-color: transparent;
}

Esto le ahorra un par de bytes más, mientras que sus intenciones de usar la transparencia son obvias (en caso de que uno no esté familiarizado con RGBA).

A partir de CSS3, puede utilizar la palabra clave transparent para cualquier propiedad CSS que acepte un color.

Answer 2

Existe una pequeña diferencia cuando usa rgba (255,255,255, a ), el color de fondo se vuelve cada vez más claro a medida que el valor de '' a '' aumenta de 0.0 a 1.0. Donde cuando se usa rgba (0,0,0, a ), el color de fondo se vuelve cada vez más oscuro a medida que el valor de '' a '' aumenta de 0.0 a 1.0. Dicho esto, está claro que tanto (255,255,255,0) como (0,0,0,0) hacen que el fondo sea transparente. (255,255,255,1) haría el fondo completamente blanco, mientras que (0,0,0,1) haría el fondo completamente negro.

Answer 3

Hay dos formas de almacenar un color con alfa. El primero es exactamente como lo ve, con cada componente como está. El segundo es usar alfa pre-multiplicado , donde los valores de color se multiplican por el alfa después de convertirlo en el rango de 0.0-1.0; Esto se hace para facilitar la compositing . Por lo general, no debería notar ni preocuparse por la forma en que lo implementa un motor en particular, pero hay casos de esquina en los que podría hacerlo, por ejemplo, si intenta aumentar la opacidad del color. Si usa rgba(0, 0, 0, 0) es menos probable que vea una diferencia entre los dos enfoques.