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

273

¿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; }
estancamiento
fuente

Respuestas:

257

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

Fabrizio Calderan
fuente
Entonces, ¿ backgroundes solo un atajo para cualquiera de los 5 atributos? Por lo tanto, ¿no es práctico en la vida real si hay posición de fondo, color e imagen?
stanigator
16
Es muy práctico, porque puede especificar todos esos atributos en una línea . Consulte la documentación oficial
Christian
3
hay una diferencia. Tengo un div con espacios transparentes entre sus elementos secundarios cuando uso el color de fondo. pero es completamente sólido cuando solo uso el fondo. Hay una diferencia verificable en sus propiedades o comportamiento.
user1873073
2
Fwiw, desde el enlace de @ ChristianVarga: la propiedad 'background' es una propiedad abreviada para establecer las propiedades de fondo individuales (es decir, 'background-color', 'background-image', 'background-repeat', 'background-attach' y ' posición de fondo ') en el mismo lugar en la hoja de estilo. Dada una declaración válida, la propiedad 'background' primero establece todas las propiedades de fondo individuales a sus valores iniciales, luego asigna valores explícitos dados en la declaración. Ejemplo dado:P { background: url("chess.png") gray 50% repeat fixed }
ruffin
157

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.

Anriëtte Myburgh
fuente
12
Esta es una respuesta más completa, la parte de reinicio es una diferencia muy importante.
Draken
1
developer.mozilla.org/en-US/docs/Web/CSS/background -> Al igual que con todas las propiedades de taquigrafía css, los valores secundarios omitidos se establecerán en su valor inicial> background-image: none background-position: 0% 0% tamaño de fondo: auto automático repetición de fondo: repetir origen de fondo: cuadro de relleno clip de fondo: cuadro de borde adjunto de fondo: desplazamiento color de fondo: transparente
MarcoZen
85

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 .

Fondo vs 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

l2aelba
fuente
13
Vine aquí para esto, muy, muy sorprendido por los resultados. Gracias por esta respuesta
Mave
¿Puedes decir también que todas las shorthands CSS son más preferibles debido al mejor rendimiento?
Levent Divilioglu
55
@LeventDivilioglu Como dijo el probador: These kind of tests are cheats and always going to be somewhat inaccurate from the real world github.com/mdo/css-perf#updated-conclusions-from-averages
l2aelba
24

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)

alphanyx
fuente
7

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/

Ankit
fuente
3

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;
HellaMad
fuente
3

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

Jukka K. Korpela
fuente
2

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.

Chuck Norris
fuente
1

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

Jonh Doe
fuente
1

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.

Marcin Biernacki
fuente
1

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.

Alireza
fuente
1

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));
Vörös Amadea
fuente
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.

Greedo
fuente
0

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

/*works*/
background: gray;

/*does not work*/
background-color: gray;
Homero
fuente
0

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.

Sección de la economía
fuente
-2

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") 
Bigwater
fuente
-2

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

user8505560
fuente
Lo siento, eso no tiene sentido. ¿Puedes editar tu respuesta para elaborar más sobre eso?
Syfer