background: none vs background: transparent qual é a diferença?

119

Existe uma diferença entre essas duas propriedades CSS:

background: none;
background: transparent;
  1. Ambos são válidos?
  2. Qual deles deve ser usado e por quê?
web-tiki
fonte

Respostas:

111

Não há diferença entre eles.

Se você não especificar um valor para qualquer uma das meia dúzia de propriedades que backgroundé uma abreviação de, ele será definido como seu valor padrão. nonee transparentsão os padrões.

Um define explicitamente o background-imagepara nonee implicitamente define o background-colorcomo transparent. O outro é o contrário.

Quentin
fonte
2
@herman - Não, eles não podem. É o mesmo que background-color: transparent; background-image: none;. Uma folha de estilo do usuário pode substituir um ou ambos os valores, mas o fará exatamente como se background-color: transparent; background-image: none;tivesse sido escrita explicitamente.
Quentin
Então, você está dizendo que o valor da propriedade "inicial" (que é usado para propriedades não especificadas) substitui até as folhas de estilo do agente do usuário? Você tem alguma referência?
herman
As folhas de estilo do agente do usuário implementam a especificação, que define o valor da propriedade inicial dessas propriedades como transparente none.
Quentin
63

Como informações adicionais sobre a resposta do @Quentin e, como ele diz corretamente, a backgroundprópria propriedade CSS, é uma abreviação de:

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

Isso significa que você pode agrupar todos os estilos em um, como:

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

Isso seria (neste exemplo):

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

Então ... quando você define: background:none;
você está dizendo que todas as propriedades de segundo plano são definidas como nenhuma ...
Você está dizendo isso background-image: none;e todas as outras no initialestado (como elas não estão sendo declaradas).
Então background:none;é:

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

Agora, quando você define apenas a cor (no seu caso transparent), está basicamente dizendo:

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

Repito, como o @Quentin diz, com razão, que os valores default transparente neste caso são os mesmos, portanto, no seu exemplo e na sua pergunta original, não, não há diferença entre eles.none

Mas! .. se você disser background:noneVs, background:redentão sim ... há uma grande diferença, como eu digo, o primeiro definiria todas as propriedades para none/defaulte o segundo, apenas mudará o colore permanecerá o restante em seu defaultestado.

Então, em resumo:

Resposta curta : Não, não há nenhuma diferença (no exemplo e na pergunta original)
Resposta longa : Sim, há uma grande diferença, mas depende diretamente das propriedades concedidas ao atributo.


Upd1: valor inicial (aka default)

Valor inicial a concatenação dos valores iniciais de suas propriedades de longhand:

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

Veja mais backgrounddescrições aqui


Upd2: Esclareça melhor a background:none;especificação.

OGM
fonte
thx for answer Quais são os valores padrão para background-image, background repeat ...? eles dependem do navegador? Se entendi sua explicação, é melhor usar o plano de fundo: nenhum, então nenhum dos valores está definido como padrão?
Web-tiki
Você já tentou o que postou? Todos os valores estão definidos como nenhum? Veja consoleesta demonstração jsfiddle.net/dnzy2/6 #
DaniP
quando você define: background: none; você está dizendo que todas as propriedades do fundo estão definidos para nenhum ... Não é uma maneira de dizer é errado
DaniP
2
+1, esta deve ser a resposta aceita (se estiver correta).
Pacerier
7

Para complementar as outras respostas: se você deseja redefinir todas as propriedades de segundo plano para seu valor inicial (que inclui background-color: transparente background-image: none) sem especificar explicitamente qualquer valor como transparentou none, você pode fazer isso escrevendo:

background: initial;
herman
fonte
5
Cuidado, o IE não suporta initial. veja Posso usar e MDN
chharvey