В настоящее время я просматриваю баннер веб-сайта с помощью инструментов разработчика chrome(Проверка). Я заметил, что у конкретного баннера в CSS есть следующий набор правил:
banner{
background-position:bottom;
background-position-x: center;
background-position-y: center;
}
Это просто формальность?. Потому что, когда я удалил три свойства фона и установил background-position: center, баннер никоим образом не пострадал.
От подражателя-разработчика. Спасибо
У этого баннера просто плохой CSS.
background-position является сокращением для, background-position-x и background-position-y.
Так,
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' */
}
Как вы уже упоминали, background-position: center выполняет ту же работу, так как и x, и y будут "в центре".
В использовании ключевых слов нет ничего плохого, но если вы только начинаете с CSS, я настоятельно рекомендую вам привыкнуть к использованию процентов.
(Вы поблагодарите меня позже, когда вам понадобится более конкретное позиционирование с помощью calc().
background: 0% 100% = background: left bottom
background: 100% 0% = background: right top
background: 50% 50% = background: center center
Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position