Qual é a diferença entre background e background-color

Qual é a diferença entre especificar uma cor de fundo usando backgrounde background-color?

Snippet # 1

body { background-color: blue; }

Snippet # 2

body { background: blue; }

Pressupondo que essas são duas propriedades distintas, no seu exemplo específico, não há diferença no resultado, pois backgroundna verdade é uma abreviação para

fundo-cor
-imagem
-de-fundo-posição
-de-fundo-repetir
-anexo
-de-fundo-clip
-de-origem
-tamanho de fundo

Assim, além do background-color, usando o backgroundatalho, você também pode adicionar um ou mais valores sem repetir nenhuma outra background-*propriedade mais de uma vez.

Qual deles escolher depende essencialmente de você, mas também pode depender de condições específicas de suas declarações de estilo (por exemplo, se você precisar substituir apenas background-colorao herdar outras background-*propriedades relacionadas de um elemento pai ou se precisar remover todos os valores exceto o background-color).

backgroundvai substituem todos os anteriores background-color, background-imageetc. especificações. É basicamente uma abreviação, mas uma redefinição também.

Às vezes, eu o uso para substituir as backgroundespecificações anteriores nas personalizações de modelos, onde eu gostaria do seguinte:

background: white url(images/image1.jpg) top left repeat;

seja o seguinte:

background: black;

Assim, todos os parâmetros ( background-image, background-position, background-repeat) irá redefinir para seus valores padrão.

Sobre o desempenho do CSS :

backgroundvs background-color:

Comparação de 18 amostras de cores renderizadas 100 vezes em uma página como pequenos retângulos, uma vez com fundo e outra com cor de fundo .

Embora esses números sejam de uma única página recarregada, com as atualizações subsequentes, os tempos de renderização foram alterados, mas a diferença percentual era basicamente a mesma sempre.

Isso representa uma economia de quase 42,6ms, quase o dobro da velocidade , ao usar o plano de fundo em vez da cor de plano de fundo no Safari 7.0.1. O Chrome 33 parece ser o mesmo.

Sinceramente, isso me surpreendeu porque, por mais tempo, por duas razões:

• Eu sempre defendo explicitamente as propriedades de CSS, especialmente em background, porque isso pode afetar adversamente a especificidade no futuro.
• Eu pensei que quando um navegador vê background: #000;, ele realmente vê background: #000 none no-repeat top center;. Não tenho um link para um recurso aqui, mas lembro de ter lido isso em algum lugar.

Ref: https://github.com/mdo/css-perf#background-vs-background-color

Com backgroundvocê pode definir todas as backgroundpropriedades como:

• background-color
• background-image
  
• background-repeat
  
• background-position
  etc.

Com background-colorvocê pode apenas especificar a cor do plano de fundo

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

Mais informações

(Veja Legenda: Plano de fundo - propriedade Shorthand)

Uma das diferenças:

Se você usar uma imagem como plano de fundo desta maneira:

background: url('Image Path') no-repeat;

não será possível substituí-lo pela propriedade "cor de fundo".

Mas se você estiver usando o plano de fundo para aplicar uma cor, é o mesmo que a cor de plano de fundo e pode ser substituído.

por exemplo: http://jsfiddle.net/Z57Za/11/ e http://jsfiddle.net/Z57Za/12/

Ambos são iguais. Existem vários seletores de fundo (ou seja background-color, background-image, background-position) e você pode acessá-los, quer através da simples backgroundseletor ou o mais específico. Por exemplo:

background: blue url(/myImage.jpg) no-repeat;

ou

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

A diferença é que a backgroundpropriedade abreviada define várias propriedades relacionadas ao plano de fundo. Ele define todos eles, mesmo se você especificar apenas, por exemplo, um valor de cor, desde então as outras propriedades serão definidas para seus valores iniciais, por exemplo, background-imagepara none.

Isso não significa que sempre substituiria outras configurações para essas propriedades. Isso depende da cascata de acordo com as regras usuais, geralmente mal compreendidas.

Na prática, a taquigrafia tende a ser um pouco mais segura. É uma precaução (não completa, mas útil) contra a obtenção acidental de algumas propriedades inesperadas do plano de fundo, como uma imagem de plano de fundo, de outra folha de estilos. Além disso, é mais curto. Mas você precisa se lembrar que realmente significa "definir todas as propriedades de segundo plano".

Não há diferença. Ambos irão funcionar da mesma maneira.

As propriedades de segundo plano CSS são usadas para definir os efeitos de segundo plano de um elemento.

Propriedades CSS usadas para efeitos de fundo:

• cor de fundo
• imagem de fundo
• fundo de repetição
• anexo de fundo
• posição de fundo

A propriedade Background inclui todas essas propriedades e você pode escrevê-las em uma linha.

Esta é a melhor resposta. A taquigrafia (segundo plano) destina-se a redefinir e a SECA (combine com a mão longa).

Comparação de 18 amostras de cores renderizadas 100 vezes em uma página como pequenos retângulos, uma vez com fundo e outra com cor de fundo.

Recriei o experimento de desempenho CSS e os resultados são significativamente diferentes hoje em dia.

background

Chrome 54 : 443 (µs / div)

Firefox 49 : 162 (µs / div)

Borda 10 : 56 (µs / div)

background-color

Chrome 54 : 449 (µs / div)

Firefox 49 : 171 (µs / div)

Borda 10 : 58 (µs / div)

Como você vê - quase não há diferença.

backgroundé o atalho para background-colore alguns outros itens relacionados ao plano de fundo, como abaixo:

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

Leia a declaração abaixo do W3C:

Background - propriedade abreviada

Para reduzir o código, também é possível especificar todas as propriedades de segundo plano em uma única propriedade. Isso é chamado de propriedade abreviada.

A propriedade abreviada de segundo plano é o segundo plano:

body {
  background: white url("img_tree.png") no-repeat right top;
}

Ao usar a propriedade taquigráfica, a ordem dos valores da propriedade é:

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

Não importa se um dos valores da propriedade está ausente, desde que os outros estejam nessa ordem.

Descobri que você não pode definir um gradiente com a cor de fundo.

Isso funciona:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Isto não:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

background é uma propriedade abreviada para o seguinte:

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

Você pode obter informações detalhadas sobre cada propriedade aqui

Ordem de propriedades

Na maior parte da implementação do navegador (acho que talvez um navegador mais antigo possa apresentar problemas), a ordem das propriedades não importa, exceto:

• background-origine background-clip: quando essas duas propriedades estiverem presentes, a primeira se refere -origine a segunda a -clip.

  Exemplo:

  background: content-box green padding-box;

  É equivalente a:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizedeve sempre seguir background-positione as propriedades devem ser separadas por/

• se background-positionfor composto por dois números, o primeiro é o valor horizontal e o segundo o valor vertical.

Notei ao gerar e-mails para o Outlook ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

Você pode fazer algumas coisas bem legais depois de entender que pode brincar com herança com isso. No entanto, primeiro vamos entender algo deste documento em segundo plano:

Com CSS3, você pode aplicar vários fundos a elementos. Elas são colocadas em camadas umas sobre as outras, com o primeiro plano de fundo que você fornece na parte superior e o último plano de fundo listado na parte de trás. Somente o último plano de fundo pode incluir uma cor de plano de fundo.

Então, quando alguém faz:

background: red;

Ele está definindo a cor de fundo para vermelho porque vermelho é o último valor listado.

Quando alguém faz:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Vermelho é a cor de fundo mais uma vez, mas você verá um gradiente.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

Agora, a mesma coisa com a cor de fundo:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

A razão pela qual isso acontece é porque, quando estamos fazendo isso:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

O último número define a cor de fundo.

Então, no momento em que herdamos o fundo (obtemos o gradiente) ou a cor do fundo, obtemos o vermelho.

Uma coisa que notei que não vejo na documentação está usando background: url("image.png")

mão curta como acima, se a imagem não for encontrada, ela envia um código 302 em vez de ser ignorado como é se você usar

background-image: url("image.png") 

Há um erro relacionado ao plano de fundo e à cor de plano de fundo

a diferença disso, ao usar o plano de fundo, às vezes quando você cria uma página da Web no plano de fundo CSS: #fff // pode percorrer um bloco de imagem da máscara ("item superior, texto ou imagem")), portanto é melhor usar sempre o plano de fundo cores para uso seguro, em seu design, se for individual