Obecnie przeglądam baner strony internetowej za pomocą narzędzia chrome dla programistów(Kontrola). Zauważyłem, że u danego banera w CSS jest następujący zestaw procedur:
banner{
background-position:bottom;
background-position-x: center;
background-position-y: center;
}
To jest tylko formalność?. Bo gdy usunąłem trzy właściwości tła i zainstalowałem background-position: centertransparent w żaden sposób nie ucierpiał.
Od naśladowca-programisty. Dziękuję
Ten baner jest po prostu zły CSS.
background-position jest skrótem dla, background-position-x i background-position-y.
Tak,
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' */
}
Jak już wspomnieliśmy, background-position: center wykonuje tę samą pracę, tak jak i x, i y będą "w centrum".
W użyciu słów kluczowych, nie ma nic złego, ale jeśli dopiero zaczynasz z CSS, gorąco polecam przyzwyczaić się do korzystania z procentów.
(Podziękujesz mi później, kiedy trzeba będzie bardziej precyzyjne pozycjonowanie za pomocą calc().
background: 0% 100% = background: left bottom
background: 100% 0% = background: right top
background: 50% 50% = background: center center
Źródło: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position