¿Cuál es la diferencia entre background y background-color

¿Cuál es la diferencia entre especificar un color de fondo usando background y background-color?

Fragmento n. ° 1

body { background-color: blue; }

Fragmento # 2

body { background: blue; }

Suponiendo que esas son dos propiedades distintas, en su ejemplo específico no hay diferencia en el resultado, ya que en backgroundrealidad es una abreviatura para

color de
fondo imagen de
fondo posición de
fondo repetición de
fondo adjunto de
fondo clip de
fondo origen de
fondo tamaño de fondo

Por lo tanto, además del background-coloruso del backgroundacceso directo, también puede agregar uno o más valores sin repetir ninguna otra background-*propiedad más de una vez.

Cuál elegir es esencialmente su decisión, pero también podría depender de las condiciones específicas de sus declaraciones de estilo (por ejemplo, si necesita anular solo background-colorcuando hereda otras background-*propiedades relacionadas de un elemento principal, o si necesita eliminar todos los valores excepto el background-color).

backgroundsustituirán a los anteriores background-color, background-imageespecificaciones, etc.. Básicamente es una taquigrafía, pero también un reinicio .

A veces lo usaré para sobrescribir backgroundespecificaciones anteriores en personalizaciones de plantillas, donde me gustaría lo siguiente:

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

ser el siguiente:

background: black;

Por lo tanto, todos los parámetros ( background-image, background-position, background-repeat) se restablecerán a sus valores por defecto.

Sobre el rendimiento de CSS :

backgroundvs background-color:

Comparación de 18 muestras de color representadas 100 veces en una página como pequeños rectángulos, una vez con fondo y otra con color de fondo .

Si bien estos números provienen de una sola recarga de página, con las actualizaciones posteriores, los tiempos de representación cambiaron, pero la diferencia porcentual fue básicamente la misma cada vez.

Eso es un ahorro de casi 42,6 ms, casi el doble de rápido , cuando se usa el fondo en lugar del color de fondo en Safari 7.0.1. Chrome 33 parece ser casi lo mismo.

Esto honestamente me dejó alucinado porque por mucho tiempo por dos razones:

• Por lo general, siempre abogan por lo explícito en las propiedades CSS, especialmente con los fondos porque puede afectar negativamente la especificidad en el futuro.
• Pensé que cuando un navegador ve background: #000;, realmente ven background: #000 none no-repeat top center;. No tengo un enlace a un recurso aquí, pero recuerdo haber leído esto en alguna parte.

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

Con backgroundusted puede establecer todas las backgroundpropiedades como:

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

Con background-colorusted solo puede especificar el color del fondo

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;

Más información

(Ver Título: Fondo - Propiedad abreviada)

Una de las diferencias:

Si usa una imagen como fondo de esta manera:

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

entonces no puede anularlo con la propiedad "background-color".

Pero si está utilizando el fondo para aplicar un color, es igual que el color de fondo y puede ser anulado.

por ejemplo: http://jsfiddle.net/Z57Za/11/ y http://jsfiddle.net/Z57Za/12/

Ambos son lo mismo. Existen múltiples selectores de fondo (es decir background-color, ) background-image, background-positiony puede acceder a ellos a través del backgroundselector más simple o el más específico. Por ejemplo:

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

o

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

La diferencia es que la backgroundpropiedad abreviada establece varias propiedades relacionadas con el fondo. Los establece a todos, incluso si solo especifica, por ejemplo, un valor de color, ya que las otras propiedades se configuran a sus valores iniciales, por ejemplo, background-imagea none.

Esto no significa que siempre anularía cualquier otra configuración para esas propiedades. Esto depende de la cascada de acuerdo con las reglas habituales, generalmente mal entendidas.

En la práctica, la taquigrafía tiende a ser algo más segura. Es una precaución (no completa, pero útil) contra la obtención accidental de algunas propiedades de fondo inesperadas, como una imagen de fondo, de otra hoja de estilo. Además, es más corto. Pero debe recordar que realmente significa "establecer todas las propiedades de fondo".

No hay diferencia. Ambos funcionarán de la misma manera.

Las propiedades de fondo CSS se utilizan para definir los efectos de fondo de un elemento.

Propiedades CSS utilizadas para efectos de fondo:

• color de fondo
• imagen de fondo
• repetición de fondo
• adjunto de fondo
• posición de fondo

La propiedad de fondo incluye todas estas propiedades y solo puede escribirlas en una línea.

Esta es la mejor respuesta. La taquigrafía (fondo) es para restablecer y SECAR (combinar con taquigrafía).

Comparación de 18 muestras de color representadas 100 veces en una página como pequeños rectángulos, una vez con fondo y otra con color de fondo.

Recreé el experimento de rendimiento CSS y los resultados son significativamente diferentes hoy en día.

background

Chrome 54 : 443 (µs / div)

Firefox 49 : 162 (µs / div)

Borde 10 : 56 (µs / div)

background-color

Chrome 54 : 449 (µs / div)

Firefox 49 : 171 (µs / div)

Borde 10 : 58 (µs / div)

Como puede ver, casi no hay diferencia.

backgroundes el acceso directo para background-coloralgunas otras cosas relacionadas con el fondo, como se muestra a continuación:

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

Lea la siguiente declaración del W3C:

Antecedentes: propiedad abreviada

Para acortar el código, también es posible especificar todas las propiedades de fondo en una sola propiedad. Esto se llama propiedad abreviada.

La propiedad abreviada de fondo es background:

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

Cuando se utiliza la propiedad abreviada, el orden de los valores de la propiedad es:

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

No importa si falta uno de los valores de propiedad, siempre que los otros estén en este orden.

Descubrí que no puede establecer un degradado con color de fondo.

Esto funciona:

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

Esto no:

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

background es propiedad abreviada de lo siguiente:

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

Puede obtener información detallada sobre cada propiedad aquí

Orden de propiedades

En la mayor parte de la implementación del navegador (creo que el navegador más antiguo podría presentar problemas) el orden de las propiedades no importa, excepto por:

• background-originy background-clip: cuando ambas propiedades están presentes, la primera se refiere a -originy la segunda a -clip.

  Ejemplo:

  background: content-box green padding-box;

  Es equivalente a:

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

• background-sizesiempre debe seguir background-positiony las propiedades deben estar separadas por/

• si background-positionestá compuesto por dos números, el primero es el valor horizontal y el segundo el valor vertical.

Me di cuenta al generar correos electrónicos para Outlook ...

/*works*/
background: gray;

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

Puedes hacer algunas cosas bonitas una vez que comprendas que puedes jugar con la herencia con esto. Sin embargo, primero comprendamos algo de este documento en segundo plano:

Con CSS3, puede aplicar múltiples fondos a los elementos. Estos se superponen entre sí con el primer fondo que proporcione en la parte superior y el último fondo en la parte posterior. Solo el último fondo puede incluir un color de fondo.

Entonces cuando uno hace:

background: red;

Está configurando el color de fondo en rojo porque el rojo es el último valor de la lista.

Cuando uno hace:

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

El rojo es el color de fondo una vez más, PERO verá un degradado.

    .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>

Ahora lo mismo con el color de fondo:

    .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>

La razón por la que esto sucede es porque cuando hacemos esto:

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

El último número establece el color de fondo.

Luego, antes de que heredemos del fondo (luego obtenemos el degradado) o el color de fondo, entonces obtenemos rojo.

Una cosa que noté que no veo en la documentación es usar background: url("image.png")

mano corta como arriba si no se encuentra la imagen, envía un código 302 en lugar de ser ignorado como si se usara

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

Hay un error relacionado con el fondo y el color de fondo

la diferencia de esto, cuando se usa el fondo, a veces cuando se crea una página web en el fondo CSS: #fff // puede anular un bloque de la máscara de imagen ("elemento superior, texto o imagen")) por lo que es mejor usar siempre el fondo- color para un uso seguro, en su diseño si es individual