¿Cuál es la diferencia entre el fondo y el color de fondo?

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

Snippet # 1

 body { background-color: blue; } 

Fragmento n.º 2

 body { background: blue; } 

    Considerando que esas son dos propiedades distintas, en su ejemplo específico no hay diferencia en el resultado, ya que el background realidad es una forma abreviada de

    color de fondo
    imagen de fondo
    posición de fondo
    fondo-repetir
    archivo adjunto
    fondo-clip
    origen de fondo
    tamaño de fondo

    Por lo tanto, además del background-color , usando el atajo de background también puede agregar uno o más valores sin repetir cualquier otra propiedad de background-* más de una ocasión.

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

    background reemplazará a todas las especificaciones previas background-color background-image , etc. Básicamente es una forma abreviada, pero también un reinicio .

    Algunas veces lo usaré para sobrescribir las especificaciones de background anteriores en personalizaciones de plantillas, en las que me gustaría lo siguiente:

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

    ser el siguiente:

    background: black;

    Entonces, todos los parámetros ( background-image , background-position , background-repeat ) se restablecerán a sus valores predeterminados.

    Acerca del rendimiento de CSS :

    background vs background-color :

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

    Fondo vs color de fondo

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

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

    Esto honestamente me sorprendió porque durante mucho tiempo por dos razones:

    • Siempre suelo argumentar explícitamente en las propiedades de CSS, especialmente con fondos, ya que puede afectar adversamente la especificidad en el futuro.
    • Pensé que cuando un navegador ve el 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 el background puede establecer todas las propiedades de background como:

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

    Con background-color 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

    (Consulte Leyenda: Fondo – Propiedad abreviada)

    Una de la diferencia:

    Si usa una imagen como fondo de esta manera:

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

    entonces no puede anularlo con la propiedad “color de fondo”.

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

    eg: http://jsfiddle.net/Z57Za/11/ y http://jsfiddle.net/Z57Za/12/

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

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

    Propiedades CSS usadas para efectos de fondo:

    • color de fondo
    • imagen de fondo
    • fondo-repetir
    • archivo adjunto
    • posición de fondo

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

    Ambos son lo mismo. Hay múltiples selectores de fondo (es decir background-color background-image background-position ) y puede acceder a ellos a través del selector de background 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 propiedad de taquigrafía de background establece varias propiedades relacionadas con el fondo. Los establece a todos, incluso si solo especificas, por ejemplo, un valor de color, ya que las otras propiedades se configuran a sus valores iniciales, por ejemplo, background-image a none .

    Esto no significa que siempre anulará cualquier otra configuración para esas propiedades. Esto depende de la cascada de acuerdo con las reglas usuales, generalmente incomprendidas.

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

    background es el atajo de background-color de background-color y algunas otras cosas relacionadas con el fondo de la siguiente manera:

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

    Lea la siguiente statement del W3C:

    Antecedentes – Propiedad de taquigrafía

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

    La propiedad de taquigrafía para el fondo es fondo:

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

    Cuando se usa la propiedad de taquigrafía, 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 y cuando los otros estén en este orden.

    Esta es la mejor respuesta. La abreviatura (fondo) es para resetear y DRY (combinar con mano dura).

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

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

     background 

    Chrome 54 : 443 (μs / div)

    Firefox 49 : 162 (μs / div)

    Edge 10 : 56 (μs / div)

     background-color 

    Chrome 54 : 449 (μs / div)

    Firefox 49 : 171 (μs / div)

    Edge 10 : 58 (μs / div)

    Como ve, casi no hay diferencia.

    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 entiendas que puedes jugar con la herencia con esto. Sin embargo, primero vamos a entender algo de este documento sobre el fondo:

    Con CSS3, puede aplicar múltiples fondos a los elementos. Estos se superponen uno encima del otro con el primer fondo que proporcionas en la parte superior y el último fondo enumerado en la parte posterior. Solo el último fondo puede incluir un color de fondo.

    Entonces cuando uno lo hace:

     background: red; 

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

    Cuando uno lo hace:

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

    El rojo es el color de fondo una vez más PERO verás 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; } 
      

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

    la diferencia de esto, cuando se utiliza el fondo, a veces cuando se crea una página web en fondo CSS: #fff // puede sobrepasar un bloque de imagen de Máscara (“elemento superior, texto o imagen”)) así que es mejor usar siempre fondo- color para un uso seguro, en su diseño si es individual

    Descubrí que no puedes 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)); 

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

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

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