Imagem de fundo-posição em CSS

Question 1

Atualmente, estou passando através de um site, banner, através de chrome developer tools(Inspecionar). Notei que um determinado banner tem o seguinte conjunto de regras no seu CSS:

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

Isso é apenas uma formalidade?. Porque, quando eu removi as três propriedades de plano de fundo e definir background-position: center, a faixa não foi afetado de nenhuma forma.

A partir de um desenvolvedor de "wannabe". Obrigado

Question 2

Que banner só tem mau CSS.
background-position é uma forma abreviada, background-position-x e background-position-y.

Assim,

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 você mencionou, background-position: center faz o mesmo trabalho, uma vez que ambos x e y será 'centro'.

Não há nada de errado com o uso de palavras-chave, mas se você está apenas começando com CSS, eu recomendo fortemente que você se acostumar a usar percentagens.
(Você vai me agradecer mais tarde, quando você precisa de mais específicas de posicionamento usando calc().

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

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

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

Que banner só tem mau CSS.
background-position é uma forma abreviada, background-position-x e background-position-y.

Assim,

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 você mencionou, background-position: center faz o mesmo trabalho, uma vez que ambos x e y será 'centro'.

Não há nada de errado com o uso de palavras-chave, mas se você está apenas começando com CSS, eu recomendo fortemente que você se acostumar a usar percentagens.
(Você vai me agradecer mais tarde, quando você precisa de mais específicas de posicionamento usando calc().

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

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

Imagem de fundo-posição em CSS

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria