Когда мы изучаем стили других веб-сайтов, мы часто сталкиваемся с ситуацией, когда одно и то же изображение используется во многих фоновых атрибутах для удовлетворения использования различных частей веб-страницы. Если вы откроете такое изображение и посмотрите, то обнаружите, что оно содержит множество маленьких картинок, таких как:
Другой пример:
Эти маленькие изображения представляют собой части после разделения всего изображения. Каждая часть помещается в одно изображение, а не сохраняется как отдельные изображения. Мы все знаем, что цель состоит в том, чтобы уменьшить количество HTTP-запросов и сэкономить время и пропускную способность .
Так как же реализовать, что только часть изображения отображается в разных местах? Здесь используется проблема позиционирования фонового изображения, о которой мы поговорим сегодня. Я думаю, что многие люди были в депрессии из-за этой проблемы, и друзья часто спрашивают меня, поэтому сегодня я объясню это систематически:
мы знаем, что при использовании изображения в качестве фона CSS следует писать так . Возьмите контейнер div как элемент . Например, это может быть и тело, Фон тд, р и т. д. такой же.
Код: div{ background: #FFF url(image) no-repeat фиксированный xy;} |
Значения атрибута фона здесь следующие:
#FFF цвет фона: (значение цвета, место, где фоновое изображение не закрыто или когда есть нет цвета фона фонового изображения)
изображение фоновое изображение: (Вот адрес изображения)
Повторяется ли «без повтора»: (Когда изображение меньше размера контейнера, изображение будет располагаться повторно, чтобы заполнить контейнер по умолчанию. «Без повторения» означает отсутствие повторения. Только в этот момент будут определены последующие координаты позиционирования. полезный.)
Прокручивается ли фиксированный фон вместе с контейнером: (есть два дополнительных значения: прокрутка прокручивается, фиксированная прокрутка не прокручивается, по умолчанию — прокрутка)
Позиционирование фонового изображения xy: (Обратите внимание, что позиционирование имеет смысл только при отсутствии повтора. Это основная задача сегодняшнего дня)
Нам необходимо прояснить несколько моментов в позиционировании фонового изображения:
1. Первое из двух значений это горизонтальное позиционирование, мы называем его позиционированием по оси X. Последнее значение представляет собой продольное позиционирование, которое мы называем позиционированием по оси Y. Если имеется только одно значение, по умолчанию используется направление оси X. В настоящее время направление оси Y по умолчанию выравнивается вверх и вниз, что соответствует центру.
2. Началом оси координат является левая вершина соответствующего контейнера.
3. Стрелка оси Y этой координаты направлена вниз, то есть все значения xy в правом нижнем углу (внутри контейнера) положительны.
4. Значения xy соответственно представляют собой значение левой вершины фонового изображения относительно начала координат (то есть левой вершины контейнера).
5. Значение xy может быть выражено в процентах или пикселях.
6. xy также может быть выражен пятью методами выравнивания: «слева, справа, сверху, снизу, по центру», но обратите внимание: при выражении «слева, справа, сверху, снизу, по центру» применяются правила выравнивания, а не чем согласовывать правила . Когда x слева, это означает, что левая сторона изображения выровнена с левой стороной контейнера. Когда он справа, это означает, что правая сторона изображения выровнена с правой стороной контейнера. Когда y находится сверху. , это означает, что верхняя часть изображения выровнена по верхней части контейнера. Когда она находится внизу, это означает, что верхняя часть изображения выровнена по нижней части контейнера. Когда xy равен центру. это означает центрированное выравнивание.
7. Если xy выражается в процентах или пикселях, его значение может быть отрицательным числом. Мы можем легко понять значение отрицательных чисел, применив правила координат. Когда x — отрицательное число, это означает, что левая вершина изображения находится слева от левой вершины контейнера. Когда y — отрицательное число, это означает, что левая вершина изображения находится над левой фиксированной точкой контейнера. То есть влево и вверх за пределы контейнера.
Ниже я использую несколько иллюстраций для иллюстрации нескольких ситуаций . Синий блок представляет собой изображение, а пунктирный прямоугольник представляет собой контейнер (это может быть div, td или непосредственно тело). Обратите внимание, что мы можем видеть только фоновое изображение внутри контейнера. Я использую белый цвет. Обозначает видимую часть, а то, что находится за пределами контейнера, я использую серый цвет. Координаты левой фиксированной точки контейнера: (0, 0).
Первый: фоновое изображение выравнивается по левому верхнему углу содержимого, 0px 0px также можно записать как левый верхний угол.
На втором рисунке фоновое изображение находится в середине контейнера, а координаты фиксированной точки имеют положительные значения.
На третьем рисунке фоновое изображение находится в верхней левой части контейнера, а координаты фиксированной точки отрицательны
------------------------- --------- ----------------------------------------
На этом этапе мы можем понять, как использовать значение позиционирования в фоновом режиме для точного позиционирования фонового изображения. Давайте вернемся и посмотрим на два изображения, представленные в начале. Мы можем использовать: позиционирование фона и видимые только внутри контейнера. Свойства вызывать определенную часть всей картинки по своему желанию.
Но для удобства вызова нужно обратить внимание на некоторые правила при расположении этих маленьких картинок. Например: расстояние между маленькими картинками обычно равно размеру контейнера, в котором вызываются маленькие картинки, или расстояние больше. чтобы они не отображались в контейнере. Покажите нам изображения, которые мы не хотим показывать!
Кроме того, если в позиционировании используются проценты, алгоритм довольно особенный. Приведу пример:
Код: background:#FFF url(image) no-repeat fix 50% -30% |
В данный момент, где должно находиться изображение в контейнере. Формула алгоритма следующая:
координата позиции; левой вершины изображения из левой вершины контейнера для
x: (ширина контейнера - ширина изображения) x50%
y: (высота контейнера – высота изображения) x (-30%)
К полученному результату применяется правило координат. Если разница отрицательна и процент положительный, результат операции отрицательный. Если разница отрицательна и процент отрицателен, результат положительный. В целом операция здесь соответствует алгоритму. Внеся результат операции в правило координат, можно получить положение картинки.
Например: ширина контейнера: 600 пикселей; высота: 600 пикселей; ширина изображения: 200 пикселей; высота: 200 пикселей;
Используя приведенный выше стиль, мы можем получить положение изображения как:
х: (600–200 пикселей)*50%
у: (600–200 пикселей)*(-30%)
Как показано ниже:
