Описание
Свойство background-position Мы можем повторить изображение из этой позиции, используя свойство background-repeat, которое заставит изображение повторяться в обоих направлениях вдоль указанной оси: см. Background-repeat .
Фон элемента — это область, покрытая шириной и высотой этого элемента (независимо от того, заданы ли эти размеры явно, или содержание диктует их); это также включает область, покрытую отступами и границами. background-colorbackground-image Эта зона покрытия очевидна, когда элемент имеет прозрачные (или dotteddashed
Некоторая область элемента должна быть видимой, чтобы background-image Если элемент не имеет внутренней высоты (определяемой его содержимым или размерами), в нем не будет места, в котором можно увидеть фон. Точно так же, если элемент содержит только всплывающие дочерние элементы, которые не были очищены — смотрите ясно — фон не будет отображаться, так как высота элемента будет равна нулю.
Если background-position
Черепица и расположение фонового изображения на встроенных элементах не определены в спецификации CSS2.1, но могут быть рассмотрены в будущих версиях.
пример
Это правило стиля помещает фоновое изображение в позицию, расположенную в 100 пикселях слева и в 200 пикселях от верхней части элемента с идентификатором «пример»:
#example{
background-position: 100px 200px;
}
Это свойство принимает одно или два значения длины, проценты или ключевые слова.
Если для background-positioncenter Если используются два значения и, по крайней мере, одно не является ключевым словом, первое значение представляет горизонтальную позицию, а второе представляет вертикальную позицию.
Значение длины размещает верхний левый угол фонового изображения в точно указанной горизонтальной и вертикальной позиции.
Обратите внимание, что когда background-positionbackground-image Например, background-image50% 50% В приведенном выше случае это приводит к тому, что изображение идеально центрируется. Это важный момент для понимания — использование background-position