Как двигать background css

background-position

CSS свойство background-position устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного background-origin .

Интерактивный пример

Синтаксис

/* Ключевые значения */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* значения */ background-position: 25% 75%; /* значения */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* Несколько изображений */ background-position: 0 0, center; /* Значения смещения края */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* Глобальные значения */ background-position: inherit; background-position: initial; background-position: unset; 

Свойство background-position указывается в виде одного или нескольких значений , разделённых запятыми.

Значения

(en-US). Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center .Синтаксис 1-значения: значение может быть:

• Значение ключевого слова center , которое центрирует изображение.
• Одно из значений ключевых слов top , left , bottom , right . Оно указывает край, на который следует поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
• или . Оно указывает координату X относительно левого края, с координатой Y установленной на 50%. Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
  • Одно из значений ключевых слов top , left , bottom , right . Если здесь указаны left или right , то оно определяет X, а другое заданное значение определяет Y. Если даны top или bottom , то оно определяет Y, а другое значение определяет X.
  • Если одно значение top или bottom , то другое значение не может быть top или bottom .

  Официальный синтаксис

  background-position =
  # (en-US)

  =
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) ] (en-US) | (en-US)
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) ] (en-US) | (en-US)
  [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) ? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) ? (en-US) ] (en-US)

  =
  | (en-US)

  Примеры

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

  HTML

  div class="exampleone">Example Onediv> div class="exampletwo">Example Twodiv> div class="examplethree">Example Threediv> 

  CSS

  /* Общий среди всех -ов */ div  background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; > /* В этих примерах используется сокращённое свойство 'background' */ .exampleone  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat; > .exampletwo  background: url("startransparent.gif") #ffee99 3em 50% no-repeat; > /* Несколько фоновых изображений: каждое изображение сопоставляется с соответствующей позицией, от первого указанного до последнего. */ .examplethree  background-image: url("startransparent.gif"), url("catfront.png"); background-position: 0px 0px, center; > 

  Результат

  Спецификации

  Specification
  CSS Backgrounds and Borders Module Level 3 # background-position

  • background-position-x : Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
  • background-position-y (en-US): Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово

  Совместимость браузеров

  BCD tables only load in the browser

  Quantum CSS заметки

  • В Gecko есть ошибка, означающая, что background-position не может быть transitioned между двумя значениями, содержащими разные числа значений (en-US), для примера background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (смотрите баг 1390446). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.

  Смотрите также

  • background-position-x
  • background-position-y (en-US)
  • background-position-inline
  • background-position-block
  • Использование нескольких значений
  • transform-origin (en-US)

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 28 авг. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  Как сдвинуть background image css

  Для определения позиции изображения относительно родительского блока, используется свойство background-position. У данного свойства есть два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Вместо использования ключевых слов, положение можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

  • top left = left top = 0% 0% (в левом верхнем углу)
  • top = top center = center top = 50% 0% (по центру вверху)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • bottom right = right bottom = 100% 100% (в правом нижнем углу)

  body  /* путь до изображения*/ background-image: url(path_to_my_image.jpeg), /* позиционирование */ background-position: right bottom; > 

  Плавное изменение background

  Анимацию можно легко сделать через CSS свойство transition например для кнопок, меню и т.д. Подробнее на htmlbook.ru.

  Transition background

  Например, изображение меняются при наведении на него курсора мыши ( :hover ).

  .button < display: inline-block; height: 129px; width: 129px; background: url(/transition.png) 0 0 no-repeat; transition: background 0.2s ease; >.button:hover < background-image: url(/transition-active.png); >

  Transition background-size

  Также transition можно применить к размеру изображения ( background-size ).

  .button < display: inline-block; height: 129px; width: 129px; background: url(/transition.png) 50% 50% no-repeat; background-size: 100% 100%; transition: background-size 0.5s ease; >.button:hover a

  Как дополнение, можно добаввить смену background-image :

  .button < display: inline-block; height: 129px; width: 129px; background: url(/transition.png) 50% 50% no-repeat; background-size: 100% 100%; transition: background-size 0.5s ease; transition: background 0.5s ease; >.button:hover a < background-size: 80px 80px; background-image: url(/transition-active.png); >

  27.12.2016, обновлено 19.02.2021
  Предыдущая запись Заголовок с горизонтальной линией посередине
  Следующая запись Как сделать интерактивную схему на SVG + jQuery

  Комментарии

  Авторизуйтесь, чтобы добавить комментарий.

  Другие публикации

  Подборка необычных градиентов CSS3 показывающая все возможности linear-gradient.

  

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

  

  Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

  

  Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой.

  

  Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

  

  В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они.

  background-image¶

  Свойство background-image устанавливает фоновое изображение для элемента.

  Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.

  Демо¶

  • 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

  Синтаксис¶

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

  /* Single value */ background-image: url('https://example.com/bck.png'); /* Multiple values */ background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png'); /* Keyword value */ background-image: none; /* Global values */ background-image: inherit; background-image: initial; background-image: unset; 

  Значения¶

  В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

  Отменяет фоновое изображение для элемента.

  background-image: none; 

  Применяется ко всем элементам

  Спецификации¶

  • CSS Backgrounds and Borders Module Level 3
  • CSS Level 2 (Revision 1)
  • CSS Level 1

  Поддержка браузерами¶

  Can I Use multibackgrounds? Data on support for the multibackgrounds feature across the major browsers from caniuse.com.

  Описание и примеры¶

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   html> head> meta charset="utf-8" /> title>background-imagetitle> style> body  background-image: url('/example/image/bg.jpg'); /* Путь к фоновому изображению */ background-color: #c7b39b; /* Цвет фона */ > style> head> body> p>. p> body> html> 

  Читать:

  Как активировать iphone без сим карты