background: none vs background: transparente ¿cuál es la diferencia?

119

¿Hay alguna diferencia entre estas dos propiedades CSS?

background: none;
background: transparent;
  1. ¿Ambos son válidos?
  2. ¿Cuál debería usarse y por qué?
web-tiki
fuente

Respuestas:

111

No hay diferencia entre ellos.

Si no especifica un valor para ninguna de las media docena de propiedades que backgroundes una abreviatura, entonces se establece en su valor predeterminado. noney transparentson los valores predeterminados.

Uno establece explícitamente el background-imageto nonee implícitamente establece el background-colorto transparent. El otro es al revés.

Quentin
fuente
2
@herman - No, no pueden. Este es el mismo que background-color: transparent; background-image: none;. Una hoja de estilo de usuario puede anular uno o ambos valores, pero lo hará exactamente como si se background-color: transparent; background-image: none;hubiera escrito explícitamente.
Quentin
Entonces, ¿está diciendo que el valor de propiedad "inicial" (que se usa para propiedades no especificadas) anula incluso las hojas de estilo del agente de usuario? ¿Tienes alguna referencia?
herman
Las hojas de estilo del agente de usuario implementan la especificación, que define el valor de propiedad inicial de esas propiedades como transparenty none.
Quentin
63

Como información adicional sobre la respuesta de @Quentin , y como dice correctamente, la backgroundpropiedad CSS en sí misma es una abreviatura de:

background-color
background-image
background-repeat
background-attachment
background-position

Es decir, puede agrupar todos los estilos en uno, como:

background: red url(../img.jpg) 0 0 no-repeat fixed;

Esto sería (en este ejemplo):

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

Entonces ... cuando establece: background:none;
está diciendo que todas las propiedades de fondo están configuradas en none ...
Está diciendo eso background-image: none;y todas las demás al initialestado (ya que no se están declarando).
Entonces, background:none;es:

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Ahora, cuando define solo el color (en su caso transparent), básicamente está diciendo:

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Repito, como @Quentin dice correctamente que los valores default transparenty en este caso son los mismos, por lo que en su ejemplo y para su pregunta original, No, no hay diferencia entre ellos.none

¡Pero! .. si dices background:noneVs background:redentonces sí ... hay una gran diferencia, como digo, el primero pondría todas las propiedades a none/defaulty el segundo, solo cambiará el colory queda el resto en su defaultestado.

Así que en breve:

Respuesta corta : No, no hay diferencia en absoluto (en su ejemplo y pregunta original)
Respuesta larga : Sí, hay una gran diferencia, pero depende directamente de las propiedades otorgadas al atributo.


Upd1: valor inicial (también conocido como default)

Valor inicial la concatenación de los valores iniciales de sus propiedades a mano alzada:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

Ver más backgrounddescripciones aquí


Upd2: Clarificar mejor la background:none;especificación.

gmo
fuente
gracias por la respuesta, ¿cuáles son los valores predeterminados para imagen de fondo, repetición de fondo ...? ¿Dependen del navegador? Si entiendo su explicación, es mejor usar background: none, por lo que ninguno de los valores está configurado como predeterminado.
web-tiki
¿Has probado lo que publicas? ¿Todos los valores están configurados como ninguno? Consulte consoleen esta demostración jsfiddle.net/dnzy2/6
DaniP
cuando estableces: background: none; está diciendo que todas las propiedades de fondo están configuradas como ninguna ... No es una forma de decir que está mal
DaniP
2
+1, esta debe ser la respuesta aceptada (si es correcta).
Pacerier
7

Para complementar las otras respuestas: si desea restablecer todas las propiedades de fondo a su valor inicial (que incluye background-color: transparenty background-image: none) sin especificar explícitamente ningún valor como transparento none, puede hacerlo escribiendo:

background: initial;
Germán
fuente
5
Tenga cuidado, IE no es compatible initial. ver Can I Use y MDN
chharvey