css - para - como poner color de fondo en html en bloc de notas

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

Question

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

Fragmento # 1

body { background-color: blue; }

Fragmento # 2

body { background: blue; }

Answer 1

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

Recreé el experimento de rendimiento CSS y los resultados son significativamente diferentes en la actualidad.

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 ves, casi no hay diferencia.

Answer 2

Con el background puede establecer todas las propiedades de background como:

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

Con el color de fondo puedes 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 Leyenda: Fondo - Propiedad taquigráfica)

Answer 3

Dado que se trata de dos propiedades distintas, en su ejemplo específico no hay diferencia en el resultado, ya que el background realidad es una abreviatura para

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

Por lo tanto, además del background-color , al usar el acceso directo de background también puede agregar uno o más valores sin repetir otra propiedad de background-* más de una vez.

Cuál elegir esencialmente depende 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 Necesito eliminar todos los valores excepto el background-color ).

Answer 4

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

Esto funciona:

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

Esto no hace

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

Answer 5

Esta es la mejor respuesta. La abreviatura (fondo) es para restablecer y DRY (se combina con la mano larga).

Answer 6

Hay un error en relación con el fondo y el color de fondo

La diferencia es que, al usar el fondo, a veces al crear una página web en el fondo CSS: #fff // puede anular un bloque de imagen de máscara ("elemento superior, texto o imagen")), por lo que es mejor usar siempre el fondo. Color para uso seguro, en su diseño si es individual.

Answer 7

La diferencia es que la propiedad de background abreviada establece varias propiedades relacionadas con el fondo. Los establece todos, incluso si solo especifica, por ejemplo, un valor de color, ya que las otras propiedades se establecen en sus valores iniciales, por ejemplo background-image en 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 usuales, 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) de obtener accidentalmente 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".

Answer 8

Los dos son iguales. 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;

Answer 9

Me he dado cuenta al generar correos electrónicos para Outlook ...

/*works*/
background: gray;

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

Answer 10

Puedes hacer algunas cosas bonitas una vez que entiendas que puedes jugar con herencia con esto. Sin embargo, primero vamos a entender algo de este documento en el fondo:

Con CSS3, puedes aplicar múltiples fondos a los elementos. Estos se colocan uno encima del otro con el primer fondo que proporciona en la parte superior y el último fondo que aparece en la parte posterior. Sólo el último fondo puede incluir un color de fondo.

Así que cuando uno hace:

background: red;

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

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 estamos haciendo esto:

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

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

Luego, en el anterior, estamos heredando del fondo (luego obtenemos el degradado) o del color de fondo, y luego obtenemos el rojo.

Answer 11

Sobre el rendimiento de CSS :

background vs background-color :

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

Si bien estos números provienen de una recarga de una sola página, con actualizaciones 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 usa fondo en lugar de color de fondo en Safari 7.0.1. Chrome 33 parece ser casi el mismo.

Honestamente, esto me dejó boquiabierto porque durante más tiempo por dos razones:

• Por lo general, siempre defiendo la presencia explícita en las propiedades de CSS, especialmente con fondos, ya que puede afectar negativamente a la especificidad en el futuro.
• Pensé que cuando un navegador ve background: #000; , realmente ven el 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

Answer 12

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

mano corta como la de arriba si no se encuentra la imagen, envía un código 302 en lugar de ser ignorada como lo es si usas

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

Answer 13

Una de las diferencias:

Si usas 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 se puede anular.

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

Answer 14

background es el acceso directo para background-color de background-color y algunos otros elementos relacionados con el fondo, como se muestra a continuación:

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

Lea la siguiente declaración de W3C:

Fondo - 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 de taquigrafía.

La propiedad taquigráfica para el fondo es el fondo:

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

Cuando se usa 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.

Answer 15

background reemplazará todas las especificaciones anteriores background-color background-image , etc. Es básicamente una taquigrafía, pero también un reinicio .

A veces lo usaré para sobrescribir las especificaciones de background anteriores en las personalizaciones de la plantilla, donde querría lo siguiente:

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

para ser el siguiente:

background: black;

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

Answer 16

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

Las propiedades de fondo de 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
• fondo adjunto
• posición de fondo

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