Imagen de background-position de CSS

Question 1

Actualmente estoy pasando a través de un sitio web banner a través de herramientas para desarrolladores de chrome(Inspeccionar). Me di cuenta de que un determinado banner tiene el siguiente conjunto de reglas en su CSS:

 banner{ 
     background-position:bottom;
     background-position-x: center;
     background-position-y: center;
  }

Es sólo una formalidad?. Porque, cuando me he quitado las tres propiedades de fondo y establecer background-position: centerel banner no se ve afectada de ninguna manera.

De un desarrollador de aspirantes. Gracias

Question 2

Esa bandera solo tiene mala CSS.
background-position es una abreviación de, background-position-x y background-position-y.

Así,

banner { 
  background-position: bottom;
  background-position-x: center; /* This is not doing anything, because x became 'center' when it was omitted above. */
  background-position-y: center; /* This will override the previously set 'bottom' */
}

Como usted ha mencionado, background-position: center hace el mismo trabajo, ya que ambos x e y será 'centro'.

No hay nada malo con el uso de palabras clave, pero si estás empezando con CSS, te recomiendo que acostumbrarse a utilizar porcentajes.
(Luego me lo agradecerá cuando usted necesita el más específicas de posicionamiento mediante calc().

background: 0% 100% = background: left bottom
background: 100% 0% = background: right top
background: 50% 50% = background: center center

Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

LSE · Answer 1 · 2021-11-24T02:48:59

Esa bandera solo tiene mala CSS.
background-position es una abreviación de, background-position-x y background-position-y.

Así,

banner { 
  background-position: bottom;
  background-position-x: center; /* This is not doing anything, because x became 'center' when it was omitted above. */
  background-position-y: center; /* This will override the previously set 'bottom' */
}

Como usted ha mencionado, background-position: center hace el mismo trabajo, ya que ambos x e y será 'centro'.

No hay nada malo con el uso de palabras clave, pero si estás empezando con CSS, te recomiendo que acostumbrarse a utilizar porcentajes.
(Luego me lo agradecerá cuando usted necesita el más específicas de posicionamiento mediante calc().

background: 0% 100% = background: left bottom
background: 100% 0% = background: right top
background: 50% 50% = background: center center

Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Imagen de background-position de CSS

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría