position-x | HTML и CSS с примерами кода
Свойство background-position-x
задаёт положение фонового изображения внутри элемента по горизонтали.
Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.
Фон- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
Синтаксис
/* Keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* Side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* Multiple values */ background-position-x: 0px, center; /* Global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset;
Значения
left
- Выравнивает фон по левому краю.
Эквивалент записи 0 или 0%.
center
- Выравнивает фон по центру горизонтали. Эквивалент записи 50%.
right
- Выравнивает фон по правому краю. Эквивалент записи 100%.
<проценты>
- Задаёт положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента.
<размер>
- Задаёт положение фона в любых доступных для CSS единицах — пиксели (px), сантиметры (cm), em и др. относительно левого края элемента.
Значение по-умолчанию:
background-position-x: left;
Применяется ко всем элементам
Спецификации
- CSS Backgrounds and Borders Module Level 4
Поддержка браузерами
Can I Use background-position-x-y? Data on support for the background-position-x-y feature across the major browsers from caniuse. com.
Смещение краёв фона:
Can I Use css-background-offsets? Data on support for the css-background-offsets feature across the major browsers from caniuse.com.
Описание и примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>background-position-x</title> <style> .clock { background: url('/example/image/clock-sprite.png') no-repeat; width: 128px; height: 128px; } .clock:hover { background-position-x: 100%; } </style> </head> <body> <div></div> </body> </html>
В данном примере при наведении курсора мыши на рисунок, фоновая картинка смещается по горизонтали, показывая цветной рисунок вместо чёрно-белого.
Анимированный фон средствами jQuery или «Эй, а ведь круто! Как Flash!» / Хабр
Занимательные поделки от Джонатана Снука. Данная статья будет интересна скорее новичкам, нежели более умудренным разработчикам, хотя мистер Снук достаточно авторитетен и его методики могут быть полезны всем.
Итак, в данной заметке речь пойдет о том, как не просто заставить фон элеметов страницы вести себя живо, но и сделать это с использованием максимально простой разметки. Все благодарности и вопросы прошу адресовать ее настоящему автору упомянутому выше, я лишь достаточно вольным образом перевожу написанное на его сайте. Также, чтобы читателям не пришлось попусту тратить свое время имеет смысл взглянуть на конечный результат стараний.
Основой для написания данной заметки стала статья Дэйва Ши об использовании спрайтов вместе с jQuery (от себя замечу, что описанная там методика работает немного «не очень» — притормаживает и порой ведет себя неадекватно). И, как было сказано ранее, задача состояла в более удобном способе воплощения задумки Дэйва.
Суть метода описанного здесь лежит в изменении позиции фона элементов. Тем не менее, при всей свой универсальности, jQuery с трудом может справиться с перемещением фона в силу того, что это требует изменения двух значений (вертикальной и горизонтальной позиции фонового изображения) одновременно. Джонатан нашел выход из ситуации при помощи плагина Background-Position Animations (его версия должна быть не ниже 1.0.2 — более ранние не поддерживают отрицательные и десятичные значения).
Что нужно?
HTML
Пример предполагает собою создание меню. Разметка предельно проста и понятна.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS
ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
li a {
background:url(bg.
jpg) repeat 0 0;
}
li a:hover {
background-position:50px 0;
}
jQuery
От jQuery нужна собственно сама библиотека, ну и плагин (Background-Position Animations) упомянутый выше. Скрипт же представляет собою следующее:
$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
После установки начальной позиции фона:
начинается анимация по событиям .css( {backgroundPosition: "0 0"} )
mouseover
и mouseout
.
Джонатан отмечает, что хоть в jQuery и есть метод hover
(который включает в себя оба события) более удобным, для жесткого контроля над выполнением, является отдельная отработка событий наведения и удаления указателя мыши.
Спрайт (тот, что
bg.jpg
)В данном случае анимация будет происходить за счет изменения позиции фона слева направо. Выбор картинки лежит сугубо в области фантазии того или иного разработчика. Каждый новый вариант спрайта приводит к новому интересному эффекту.
Еще пример:
В этом же случае «перемещение» происходит по вертикали. При этом, чем плавнее переход между цветами изображения, тем менее заметно будет перемещение как таковое. Соответственно будет более мягкий эффект затухания (см. пример «Example C: Fade 1-colour»).
Ссылки по теме (англоязычные ресурсы)
- Анимированная панель навигации (CSS и jQuery)
- Спрайты и jQuery — дело за JavaScript
- Анимированная навигация средствами jQuery
- Создание эффекта «Гаражных дверей»
Вот и все! Всем спасибо за внимание.
8 потрясающих анимированных фонов, созданных с помощью CSS и JavaScript
Эрик Карковак
к записи
ПОСМОТРИТЕ ЭТО РУКОВОДСТВО В РЕАЛЬНОМ РЕЖИМЕ →
- Создайте HTML-файл и определите разметку и стиль
Шаг 1. Создайте файл HTML и определите разметку и стиль
Делаем HTML-файл и сохраняем его под именем animate.html
<голова> <стиль> тело { ширина:100%; поле:0 авто; отступ: 0px; семейство шрифтов: Helvetica; } #обертка { выравнивание текста: по центру; поле:0 авто; отступ: 0px; ширина:100%; } #animated_div { ширина: 100%; высота: 100%; фон: url(images/animated_background.jpg) repeat-x; размер фона: обложка; -webkit-анимация: анимация фона 60-х линейная бесконечная; анимация: animatebackground 60-х линейная бесконечная; -ms-анимация: анимация фона 60-х линейная бесконечная; -moz-анимация: анимация фона 60-х линейная бесконечная; } @ключевые кадры { из {фоновой позиции: 0 0;} в {позиция фона: -1000px 0;} } @-webkit-ключевые кадры { из {фоновой позиции: 0 0;} в {позиция фона: -1000px 0;} } @-ms-keyframes анимация фона { из {фоновой позиции: 0 0;} в {позиция фона: -1000px 0;} } @-moz-keyframes анимация фона { из {фоновой позиции: 0 0;} в {позиция фона: -1000px 0;} } #animated_div h2 { белый цвет; верхняя часть отступов: 100 пикселей; размер шрифта: 50px; } #animated_div h2 п { размер шрифта: 20 пикселей; } стиль> голова> <тело> <дел> <дел>Анимированный фон с помощью CSS3