Se debe utilizar rgba(0, 0, 0, 0) o rgba(255, 255, 255, 0) para la transparencia en CSS?

¿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?

Author: BoltClock, 2013-04-12
Source

3 answers

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 tres primeros parámetros (el red, green, y blue canales) no importará porque no podrá ver el color de todos modos.

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

  1. es menos escribir, {[17]]}
  2. mantiene algunos bytes adicionales fuera de su archivo CSS, y
  3. verá un problema obvio si el valor alfa cambia a algo indeseable.

Usted podría evitar el modelo rgba por completo y usar la palabra clave transparent en su lugar, que de acuerdo con w3.org , es equivalente a "negro transparente" y debería computarse a rgba(0, 0, 0, 0). Por ejemplo:

h1 {
    background-color: transparent;
}

Esto le ahorra otro par de bytes 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 usar la palabra clave transparent para cualquier CSS propiedad que acepta un color.

 55
Author: Cᴏʀʏ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-22 20:49:48

Hay dos formas de almacenar un color con alfa. El primero es exactamente como lo ves, con cada componente tal cual. La segunda es usar alfa pre-multiplicado , donde los valores de color se multiplican por el alfa después de convertirlo al rango 0.0-1.0; esto se hace para hacer composición más fácil. Por lo general, usted no debe notar o cuidado de qué manera se implementa por cualquier motor en particular, pero hay casos de esquina donde podría, por ejemplo, si se trató de aumentar la opacidad del color. Si utiliza rgba(0, 0, 0, 0) es menos probable que vea una diferencia entre los dos enfoques.

 8
Author: Mark Ransom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-11 21:31:14

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

 3
Author: Rahul Goyal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-15 15:54:56