html — обложка размера фона CSS и положение фона

спросил

Изменено 5 лет, 1 месяц назад

Просмотрено 95 тысяч раз

HTML:

 #backgroundproduct {
  положение: фиксированное;
  Топ-5%;
  слева: 5%;
  ширина: 90%;
  высота: 90%;
  z-индекс: 12;
  -webkit-background-size: обложка;
  -moz-background-size: обложка;
  -o-background-size: обложка;
  размер фона: обложка;
  фоновая позиция: вверху;
}

Я использую изображения в качестве фонового изображения, только нижняя часть изображения важнее верхней.

Как сделать фон немного выше?

  • HTML
  • CSS
  • фоновое изображение
3

Если дно важнее: background-position: bottom;

background-position

также допускает процентные значения: 0% 0%; по умолчанию.

Первое значение — это горизонтальное положение, а второе значение — это вертикальный. Верхний левый угол 0% 0%. Правый нижний угол есть 100% 100%. Если вы укажете только одно значение, другое значение будет равно 50%.

Попробуйте background-position: 0% -10%;

5

Вы можете использовать:

 фоновое положение: по центру снизу;
5

Просто для ясности: процентное соотношение положения фона рассчитывается как для изображения, так и для контейнера фона. Итак, background-position: 25% 25%; найдет точку 25% для X и Y в фоновом контейнере и выровняет точку 25%, 25% изображения поверх этой точки.

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Как использовать CSS background-size и background-position — SitePoint

Мы можем многое сделать со свойствами фона CSS. В этой статье мы рассмотрим, как использовать свойство background-size для установки размера фонового изображения, а также рассмотрим варианты позиционирования этого фонового изображения с помощью

background-position .

Содержание
  1. Настройка
  2. Настройка размеров фона с помощью background-size
    • размер фона: содержит
    • размер фона: обложка
    • background-size с другими значениями
  3. Установка положения фоновых изображений с помощью background-position
    • Использование background-position с ключевыми словами
    • Использование background-position со значениями длины
    • Использование background-position с процентными значениями

Настройка

Для нашей демонстрации фонового изображения мы будем использовать следующее изображение (Ия на Санторини, Греция).

Его естественные размеры 400px на 600px .

Вот наша базовая демонстрация CodePen с

в центре
. (Подробнее о центрировании элементов с помощью CSS Grid можно прочитать здесь.) Размер элемента div составляет 300 пикселей на 200 пикселей .

См. ручку
CSS background-size: Template by SitePoint (@SitePoint)
на CodePen.

Элемент div имеет желтый фон, и фоновое изображение будет расположено над этим желтым фоном (поскольку цвета фона всегда располагаются под любым фоновым изображением).

Если мы сейчас просто добавим изображение в качестве фона, мы заметим, что видна только его часть. Это потому, что изображение шире и выше, чем div.

См. Pen
CSS background-size: Шаблон с фоновым изображением от SitePoint (@SitePoint)
на CodePen.

Изображение ниже дает представление о частях фонового изображения, которые не видны за пределами div.

Это явно не очень удовлетворительный результат, поэтому давайте посмотрим, как свойство background-size может нам помочь.

Установка размеров фона с помощью background-size

С годами стали доступны новые свойства для управления фоновыми изображениями в CSS, в том числе background-size . Он позволяет нам установить размер фонового изображения, как мы всегда могли делать со встроенными изображениями.

Свойство background-size предлагает на выбор два значения ключевых слов — покрытие и содержит — и оно также может принимать числовые значения с такими единицами измерения, как px , em и % , вдоль с авто . Давайте рассмотрим примеры каждого из них.

background-size: содержат

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

См. Pen
CSS background-size: Contain от SitePoint (@SitePoint)
на CodePen.

В этом примере мы добавили следующий CSS:

 div {
  размер фона: содержит;
  фоновый повтор: без повтора;
}

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

background-repeat: no-repeat; останавливает это поведение. (Попробуйте удалить его, чтобы увидеть повторяющееся изображение.)

background-size: cover

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

См. Pen
CSS background-size: Cover by SitePoint (@SitePoint)
на CodePen.

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

Когда мы посмотрим на свойство background-position , мы узнаем, как указать, какая часть изображения видна.

background-size с другими значениями

Давайте посмотрим, какие другие значения мы можем использовать со свойством background-size .

Если мы добавим одно процентное значение 50% , то получится следующее:

См. Размер фона CSS Pen
с одним значением % от SitePoint (@SitePoint)
на КодПене.

Фоновое изображение теперь составляет 50% ширины div, но все еще выше, чем div, поэтому нижняя часть изображения скрыта. Таким образом, одно процентное значение применяется к оси x. По умолчанию для оси Y установлено значение auto , что означает, что изображение сохраняет свое естественное соотношение сторон.

Вот что произойдет, если мы добавим два процентных значения ( 50% 50% ):

См. Размер фона CSS Pen
с двумя значениями % от SitePoint (@SitePoint)
на КодПене.

Ого! Теперь изображение покрывает 50% ширины div и 50% высоты — это означает, что его соотношение сторон значительно искажено.

Мы получим аналогичные результаты, если заменим % на px или другие значения единиц измерения. Мы могли бы, например, сделать что-то вроде background-size: 50px 50px или background-size: 200px 3em и так далее. Мы можем поэкспериментировать с этими значениями в Pen выше… хотя этот подход редко будет полезен, потому что он будет искажать фоновое изображение, если мы тщательно не выберем значения, сохраняющие его соотношение сторон.

Гораздо более полезным для уточнения настроек фонового изображения является свойство background-position , так что давайте рассмотрим его далее.

Установка положения фоновых изображений с помощью background-position

Выше мы видели, что по умолчанию верхний левый угол нашего фонового изображения помещается в верхний левый угол его контейнера. То есть настройка по умолчанию background-position выглядит так:

 div {
  background-position: слева вверху; /* или 0 0 и т.д.*/
}

Свойство

background-position дает нам большой контроль над тем, где размещается наше фоновое изображение, и оно очень хорошо работает в сочетании с background-size: cover , поэтому мы будем использовать их вместе в следующих парах. примеров.

Использование background-position с ключевыми словами

В нашем примере изображения много голубого неба вверху слева, поэтому давайте вместо этого расположим его снизу справа:

 div {
  размер фона: обложка;
  background-position: справа внизу;
}

См. размер фона CSS Pen
со значениями длины от SitePoint (@SitePoint)
на CodePen.

В дополнение к различным комбинациям сверху , снизу , слева и справа , есть также центр , который красиво центрирует изображение. (Попробуйте заменить background-position: right bottom; на background-position: center; в Pen выше.)

Использование background-position со значениями длины

Мы можем расположить наше фоновое изображение со значениями длины, такими как пиксели и ems. Это позволяет нам отталкивать и оттягивать изображение от краев контейнера. Например:

 дел {
  размер фона: обложка;
  фоновая позиция: 20px 2em;
}

См. фоновую позицию CSS Pen
со значениями длины от SitePoint (@SitePoint)
на CodePen.

Здесь изображение закрывает контейнер, но затем оно смещается на 20 пикселей слева от контейнера и на 2 em сверху.

Значения длины можно комбинировать со значениями ключевых слов. Например, нижняя 20px справа 2em перемещает изображение на 20px снизу и на 2em справа.

Мы также можем использовать отрицательные значения, чтобы еще больше подтолкнуть и переместить наше фоновое изображение в нужное положение.

Использование background-position с процентными значениями

Использование background-position процентных значений дает нам большой контроль над позиционированием нашего изображения, но это может быть немного сложно понять. Для этой демонстрации мы удалим размер фона и просто будем работать с естественными размерами изображения:

 раздел {
  фоновая позиция: 50% 50%;
}

См. фоновое положение CSS Pen
с процентными значениями от SitePoint (@SitePoint)
на CodePen.

Так что же означает 50% ? 50% чего? Это означает, что отметка 50% изображения совпадает с отметкой 50% контейнера . То есть, если мы проведем вертикальные и горизонтальные линии через центр изображения и центр контейнера, эти линии совпадут, как показано на рисунке ниже.

Если мы установим background-position на 20% 40% , это означает, что вертикальная линия на 20% слева от изображения совпадает с вертикальной линией на 20% слева от контейнера, а горизонтальная линия на 40 % от верхней части изображения совпадает с вертикальной линией на 40 % от верхней части контейнера, как показано ниже.

Заключение

Свойство background-size — действительно полезное дополнение к CSS, и оно часто оказывается полезным, особенно когда контейнеры меняют размер в адаптивных макетах. 9Свойство 0031 background-position добавляет дополнительные возможности, позволяя нам выбирать, как фоновые изображения располагаются внутри контейнера.

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

No related posts.