Attualmente sto attraversando un sito banner tramite chrome developer tools(Controlla). Ho notato che una particolare bandiera ha le seguenti regole nel suo CSS:
banner{
background-position:bottom;
background-position-x: center;
background-position-y: center;
}
Si tratta solo di una formalità?. Perché, quando ho tolto le tre proprietà sfondo e impostare background-position: centeril banner non è stato influenzato in alcun modo.
Da uno sviluppatore wannabe. Grazie
Il banner deve solo male CSS.
background-position è una scorciatoia per, background-position-x e background-position-y.
Così,
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' */
}
Come hai detto, background-position: center fa lo stesso lavoro, dal momento che entrambi x e y saranno 'center'.
Non c'è niente di sbagliato con l'utilizzo di parole chiave, ma se si sta appena iniziando con i CSS, mi consiglia di avere a portata di percentuali.
(Mi ringrazierai più tardi, quando avete bisogno di più specifico posizionamento tramite 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