Путаница в свойствах фона CSS?

Question

Я не могу найти, почему центр / крышка используется в этом коде.

На какое свойство ссылается центр.Я знаю, что это действительно просто, но, пожалуйста, помогите мне, дав ответ, который мешает мне продолжать учиться.

     background: url('img/page-bg.png') no-repeat center center/cover;

Answer 1

Значения center относятся к background-position (X и Y), а cover - это значение свойства background-size.То, что здесь происходит, center center центрирует изображение как по горизонтали, так и по вертикали.cover масштабирует изображение, чтобы занять весь экран, без свободного места.Подробности см. Ниже.

Свойство background является условным обозначением CSS и устанавливает несколько стилей одновременно.Проверьте документы по адресу MDN

Свойство CSS сокращенной записи фона устанавливает сразу все свойства стиля фона, такие как цвет, изображение, происхождение и размер, или метод повтора.

Свойство, на которое ссылается center/cover, это background-position и background-size:

Значение <bg-size> может быть включено только сразу после <position>, разделенныхсимвол /, например: center/80%.

Значение cover масштабирует изображение настолько широко, насколько это возможно, без растяжения и будет обрезаться, чтобы не осталось пустого места.

Answer 2

В этом случае это не слишком отличается от применения поля: 0 auto для других элементов.Фоны элементов имеют некоторые специальные свойства, помогающие определить местоположение при его отображении.https://www.w3schools.com/csSref/pr_background-position.asp

По умолчанию это верхний левый угол родительского элемента, в котором он находится. Таким образом, вы можете применить местоположение для переопределения этого значения по умолчанию.