Qual é a diferença entre fundo e cor de fundo?

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

Snippet # 1

 body { background-color: blue; } 

Snippet # 2

 body { background: blue; } 

Premissa que essas são duas propriedades distintas, no seu exemplo específico não há diferença no resultado, uma vez que o background é realmente uma forma abreviada de

cor de fundo
imagem de fundo
posição de fundo
fundo de repetição
fundo de binding
clipe de fundo
origem de fundo
tamanho de fundo

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

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

background superará todas as especificações anteriores background-color background-image , etc. É basicamente uma forma abreviada, mas também uma redefinição .

Às vezes, vou usá-lo para sobrescrever as especificações de background anteriores nas personalizações de modelo, onde eu gostaria do seguinte:

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

ser o seguinte:

background: black;

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

Sobre o desempenho do CSS :

background vs background-color :

Comparação de 18 amostras de colors renderizadas 100 vezes em uma página como pequenos retângulos, uma vez com background e outra com background-color .

Fundo vs cor de fundo

Embora esses números sejam de uma única recarga de página, com atualizações subseqüentes, os tempos de renderização foram alterados, mas a diferença percentual foi basicamente a mesma sempre.

Essa é uma economia de quase 42.6ms, quase duas vezes mais rápida , ao usar o plano de fundo em vez da cor de fundo no Safari 7.0.1. O Chrome 33 parece ser o mesmo.

Isso honestamente me surpreendeu porque por mais tempo por dois motivos:

  • Eu costumo sempre argumentar para explicitação em propriedades CSS, especialmente com fundos, porque isso pode afetar negativamente a especificidade no caminho.
  • Eu pensei que quando um navegador vê o background: #000; , eles realmente vêem o background: #000 none no-repeat top center; . Eu não tenho um link para um recurso aqui, mas me lembro de ler isso em algum lugar.

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

Com background você pode definir todas as propriedades de background como:

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

Com background-color você pode especificar a cor do 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 a legenda: Background – Propriedade Shorthand)

Uma das diferenças

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

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

então você não pode substituí-lo com a propriedade “background-color”.

Mas se você estiver usando o plano de fundo para aplicar uma cor, ela será igual à cor de fundo e poderá ser substituída.

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

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

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

Propriedades CSS usadas para efeitos de segundo plano:

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

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

Ambos são iguais. Existem vários seletores de fundo (ou seja background-color background-image background-position ) e você pode acessá-los através do seletor de background mais simples 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 propriedade abreviada de background define várias propriedades relacionadas ao plano de fundo. Ele define todos, mesmo se você especificar apenas um valor de cor, desde então, as outras propriedades são definidas para seus valores iniciais, por exemplo background-image para none .

Isso não significa que ele sempre replaceá quaisquer 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 acidentalmente obter algumas propriedades de plano de fundo inesperadas, como uma imagem de plano de fundo, de outra folha de estilos. Além disso, é mais curto. Mas você precisa lembrar que isso realmente significa “definir todas as propriedades do plano de fundo”.

background é o atalho para background-color e alguns outros materiais relacionados a fundo como abaixo:

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

Leia a declaração abaixo do W3C:

Plano de fundo – Propriedade de taquigrafia

Para encurtar 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 para background é background:

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

Ao usar a propriedade abreviada, 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 estiver faltando, desde que os outros estejam nessa ordem.

Esta é a melhor resposta. Shorthand (background) é para reset e DRY (combinar com longhand).

Comparação de 18 amostras de colors renderizadas 100 vezes em uma página como pequenos retângulos, uma vez com background e outra com background-color.

Eu recriou o experimento de performance 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.

Eu notei quando gerando e-mails para o Outlook …

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

Você pode fazer algumas coisas bem legais quando entender que pode jogar com inheritance com isso. No entanto, primeiro vamos entender algo deste documento sobre fundo:

Com o CSS3, você pode aplicar vários fundos aos elementos. Estes são sobrepostos uns aos outros com o primeiro plano de fundo que você fornece no topo e o último plano de fundo listado na parte de trás. Somente o último plano de fundo pode include uma cor de plano de fundo.

Então, quando um faz:

 background: red; 

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

Quando um 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; } 
  

Há um bug referente a fundo e cor de fundo

A diferença disso, quando usando background, às vezes quando você cria uma página web em background CSS: #fff // pode sobrepujar um bloco de imagem Mask (“top item, text or image”)) então é melhor usar sempre o background- cor para uso seguro, em seu design se o seu indivíduo

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

Isso funciona:

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

Isso não:

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

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

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

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