Respuestas:
No hay diferencia entre ellos.
Si no especifica un valor para ninguna de las media docena de propiedades que background
es una abreviatura, entonces se establece en su valor predeterminado. none
y transparent
son los valores predeterminados.
Uno establece explícitamente el background-image
to none
e implícitamente establece el background-color
to transparent
. El otro es al revés.
transparent
y none
.
Como información adicional sobre la respuesta de @Quentin , y como dice correctamente, la
background
propiedad 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 initial
estado (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
transparent
y 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:none
Vs background:red
entonces sí ... hay una gran diferencia, como digo, el primero pondría todas las propiedades a none/default
y el segundo, solo cambiará el color
y queda el resto en su default
estado.
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.
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
background
descripciones aquíUpd2: Clarificar mejor la background:none;
especificación.
console
en esta demostración jsfiddle.net/dnzy2/6
Para complementar las otras respuestas: si desea restablecer todas las propiedades de fondo a su valor inicial (que incluye background-color: transparent
y background-image: none
) sin especificar explícitamente ningún valor como transparent
o none
, puede hacerlo escribiendo:
background: initial;
background-color: transparent; background-image: none;
. Una hoja de estilo de usuario puede anular uno o ambos valores, pero lo hará exactamente como si sebackground-color: transparent; background-image: none;
hubiera escrito explícitamente.