Отрывок из работ других людей~~~ Очень хороший материал Грамматика:
фоновая позиция: длина || длина
фоновая позиция: позиция ||
значение позиции:
length : Percent | Значение длины, состоящее из числа с плавающей запятой и идентификатора единицы.
позиция: вверху | в центре | внизу | в центре
|
Устанавливает или извлекает положение фонового изображения объекта. Атрибут фонового изображения должен быть указан первым. На позиционирование этого свойства не влияют настройки заполнения объекта.
Значение по умолчанию: 0% 0%. В это время фоновое изображение будет расположено в левом верхнем углу области содержимого объекта без учета отступов.
Если указано только одно значение, это значение будет использоваться для оси абсцисс. По умолчанию ордината будет равна 50%. Если указаны два значения, для ординаты будет использоваться второе значение.
Если значение настройки равно центру справа, поскольку значение по оси абсцисс перезапишет значение центра, фоновое изображение будет расположено справа.
Соответствующее свойство скрипта — BackgroundPosition.
background-position — определяет значение позиции
фонового изображения:
[ <процент> | <длина> | слева | посередине | справа ] [ <процент> | сверху | снизу |
* уровень
слева: слева
центр: средний
верно: верно
* вертикальный
вверху: вкл.
центр: средний
внизу: следующий
* Сочетание вертикального и горизонтального.
х-% у-%
Начальное значение
x-pos y-pos
: 0% 0%
Наследование: Нет
Применяется к: всем элементам
фон: фон.позиция: позиция ***************************** Ключевые моменты для объяснения: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<голова>
<title>Проблема с расположением фона</title>
<style type="text/css">
<!--
*{
маржа: 0;
дополнение: 0;
}
тело {
выравнивание текста: по центру;
фон:#000;
}
#контейнер{
ширина: 1000 пикселей;
маржа: 0 авто;
фон:#fff url(images/bg.jpg) без повтора слева вверху;
высота: 500 пикселей;
}
-->
</стиль>
</голова>
<тело>
<div id="контейнер"> </div>
</тело>
</html>1.background-position:left top; (см. рис. 1) Левый верхний угол фонового изображения выравнивается по левому верхнему углу контейнера (контейнера), а лишняя часть скрывается. Эквивалентно фоновому положению:0,0; также эквивалентно фоновому положению:0%,0%;2.background-position:right low (см. рисунок 2). Правый нижний угол фонового изображения выравнивается по правому нижнему углу контейнера, а лишняя часть скрывается. Эквивалент фона-позиции: 100%, 100% также эквивалентно фону-позитону: ширина контейнера (container) — ширина фонового изображения, высота контейнера (контейнера) — высота фонового изображения. 3. Background-position: 500px 15px (см. рисунок 3). Фоновое изображение перемещается на 500 пикселей вправо и на 15 пикселей вниз от верхнего левого угла контейнера, а лишняя часть скрывается. 4.background-position:-500px -15px (см. рисунок 4). Фоновое изображение перемещается на 500 пикселей влево и на 15 пикселей вверх от верхнего левого угла контейнера, а лишняя часть скрывается. 5. фоновая позиция: 50% 50% (см. рисунок 5). Эквивалентно левому: {ширина контейнера — ширина фонового изображения}*левый процент, лишняя часть скрыта. Эквивалент справа: {высота контейнера (контейнера) - высота фонового изображения}*правый процент, лишняя часть скрыта. Например: фоновая позиция:50% 50%; то есть фоновая позиция: (1000-2000)*50%px, (500-30)*50%px, то есть фоновая позиция:-500px, 235px; ; то есть фоновое изображение переместите на 500 пикселей влево от верхнего левого угла контейнера и на 235 пикселей вниз 6. (В этом случае фоновое изображение должно быть bg2.jpg, чтобы увидеть эффект. Высота bg.jpg; слишком мал и эффект не очевиден) background-position :-50% -50% (см. рисунок 6); Эквивалентно левому: -{{ширина контейнера (контейнера) - ширина фонового изображения}*левый процент (все проценты являются положительными значениями)}, а лишняя часть скрыта. Эквивалентно правому: -{{высота контейнера (контейнера) - высота фонового изображения}*правый процент (все проценты являются положительными значениями)}, а лишняя часть скрыта. Например: фоновая позиция:-50% -50%; это фоновая позиция:-{(1000-500)*50%}px,-{(500-360)*50%}px это фоновая позиция: - 250px,-70px, то есть фоновое изображение перемещается на 250px влево от верхнего левого угла контейнера и на 70px вверх;