Свойство background-position CSS — GeeksforGeeks
Свойство background-position в CSS в основном используется для установки начальной позиции фонового изображения, т.е. оно используется для установки изображения в определенной позиции. Положение относительно слоя позиционирования можно задать с помощью свойства background-origin.
Синтаксис:
background-position: value;
Примечание: Фоновое изображение по умолчанию размещается в верхнем левом углу элемента с повторением как по горизонтали, так и по вертикали.
Значения свойств:
background-position: слева вверху; : Это свойство используется для установки изображения в левом верхнем углу.
Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции устанавливается слева вверху.
HTML
|
Выход:
Фоночная поставка: левый центр; : Это свойство используется для установки изображения в левом центре.
Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции устанавливается влево по центру.
HTML
|
Output:
background- положение: слева внизу; : Это свойство используется для установки изображения в левом нижнем углу.
Пример: Этот пример иллюстрирует использование свойства background-position , где значением position является левое нижнее положение.
HTML
Body { |
Output :
background-position: по центру вверху; : Это свойство используется для установки изображения в центральную верхнюю позицию.
Пример: Этот пример иллюстрирует использование свойство background-position , где значение позиции установлено в центральную верхнюю позицию.
HTML
|
Вывод:
background-position: center center; : Это свойство используется для установки изображения в центральное центральное положение.
Пример: Этот пример иллюстрирует использование свойства background-position , где значением position установлено значение center center position.
HTML
|
Выход:
. : Это свойство используется для установки изображения в центральное нижнее положение.
Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции устанавливается в центральную нижнюю позицию.
HTML
|
Вывод:
background-position: справа вверху; : Это свойство используется для установки изображения в правильное верхнее положение.
Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции устанавливается в правую верхнюю позицию.
HTML
|
Выход:
9000 3 9000. : Посредник : правый. : Это свойство используется для установки изображения в правом центральном положении.Пример: Этот пример иллюстрирует использование свойства background-position , где значением position установлено правое центральное положение.
HTML
Body { |
Output :
background-position: справа внизу; : Это свойство используется для установки изображения в правом нижнем положении.
Пример: Этот пример иллюстрирует использование свойство background-position , в котором значение позиции устанавливается в правую нижнюю позицию.
HTML
|
Вывод:
background-position: 25% 75%; : Это свойство используется для установки изображения на 25% слева и 75% сверху.
Примечание: Для обозначения x%y% здесь x% обозначает положение по горизонтали, а y% обозначает положение по вертикали относительно исходного положения, т. е. слева вверху.
Пример: Этот пример иллюстрирует использование свойства background-position , где значение позиции задается в виде процента.
HTML
|
Выход:
Фона. : Это свойство используется для установки изображения на расстоянии 30 пикселей слева и 80 пикселей сверху.
Примечание : Для обозначения x-pos y-pos здесь единицы представлены в пикселях или любых других единицах CSS.
Пример: Этот пример иллюстрирует использование background-position , где значение позиции задается в виде пикселей.
HTML
> |
Вывод:
Поддерживаемые браузеры: Ниже перечислены браузеры, поддерживаемые свойством background-position 90:004 9. 0005
9106 Изображения by aliceyt Coding
Используйте background-position для настройки положения изображения
Я хотел бы поделиться с вами тем, как позиционировать фоновое изображение (вместо того, чтобы оставлять его положение браузеру, где он будет обрезать изображение в направление справа и снизу по умолчанию).
Для этой работы я использую пейзаж с мужчиной на переднем плане в качестве фокуса. Изображение добавляется как background-image
со свойством CSS background-size: cover
. Таким образом, он будет изменен по размеру, чтобы покрыть весь контейнер.
В зависимости от размера контейнера изображение будет растянуто или обрезано.
Я буду использовать фотографию ниже, чтобы показать, как расположить фоновое изображение на веб-странице. Цель состоит в том, чтобы изображение покрывало всю веб-страницу, будь то на мобильном или настольном компьютере.
Фото Rémi Jacquaint на UnsplashИзображение выше отлично смотрится на большом ноутбуке. Оно выглядит немного растянутым, когда я сравниваю исходное изображение с тем, как оно отображается в браузере (как показано ниже).
На маленьком ноутбуке, хотя изображение обрезано справа, человек на снимке все равно виден. Однако на мобильном он полностью обрезан — не то, что задумал дизайнер.
Изображение на маленьком ноутбуке по сравнению с тем же изображением на большом мобильном телефонеКак расположить изображение так, чтобы человек на нем оставался в центре внимания?
Быстрым решением будет обрезать изображения с помощью редактора изображений, а затем отобразить правильное изображение в зависимости от размера экрана.
Другим способом было бы использование CSS — это то, что я использую здесь.
Некоторые сведения об использовании позиции
Позиция сообщает браузеру, как разместить изображение внутри контейнера относительно краев его контейнера.
Значения для позиции могут быть выражены как ключевые слова ( верхняя
, нижняя
, слева
, справа
, по центру
), процент или длина.
Значение по умолчанию background-position
равно top left
или 0% 0%
.
- Если указано только одно значение, в зависимости от значения я могу указать положение либо по горизонтали, либо по вертикали. Затем устанавливается другое положение
по центру
. - Если используются два значения, не являющиеся ключевыми словами, первое значение представляет положение по горизонтали, а второе — положение по вертикали.
- Если используются три или четыре значения, значения длины в процентах будут служить смещениями для предшествующих значений ключевого слова.
Я добавляю файл изображения, используя свойство Глядя на код HTML, контейнер Чтобы изменить положение изображения, я добавляю В этом случае, когда мое изображение отображается в полный рост (или близко к нему), центрирование изображения по оси Y не имеет никакого эффекта. Следовательно, когда я использую background-position: center, background-position: top и background-position: bottom, я эффективно использую Помимо использования ключевых слов, таких как background-image
в элементе
. Использование ключевых слов для значения
background-position
свойство и добавьте center
, top
, bottom
, left
и right
в качестве значений. Ниже приведены скриншоты того, как меняется положение изображения при применении разных значений: background-position: центр по центру.
слева
справа
верх
снизу
центр
Использование неключевых слов для
center
, top
, bottom
, left
и right
в качестве значений, я могу использовать другие единицы измерения CSS для более точных или процентных значений.