Css background image position: background-position — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

css властивість background-position

  • Головна
  • css
  • властивості
  • background-position

Властивість background-position задає початкову позицію (зміщення) фонового зображення. Без задання, тло знаходиться в лівому верхньому куті елемента і повторюється як по вертикалі, так і по горизонталі.

Властивість background-position може отримувати до чотирьох значеннь.

Якщо зміщення задане одним значенням, це значення вказує горизонтальне зміщення. Браузер встановлює вертикальне позицію по центру автоматично.

Якщо двома значеннями, перше значення — горизонтальне зміщення, а друге значення — вертикальне зміщення.

Синтаксис три або чотири значення змінюється між ключовими словами та довжиною або відсотковими одиницями. Ти можеш використовувати будь-яке значення ключових слів, за винятком центру, у трьох-або чотиризначній декларації у фоновому режимі.

Коли ти вказуєш три значення, браузер інтерпретує «відсутнє» четверте як 0.

Дивись 3 приклад.

Перелік деяких можливих значень:

  • <відсотки> <відсотки> — перше значення визначає позицію по горизонталі, друге — по вертикалі. Наприклад, 0% 0% — верхній лівий кут. 100% 100% — правий нижній.
  • <відсотки> — горизонтальна позиція картинки у відсотках від 0% до 100%. Вертикальне значення буде рівним 50% (= посередині).
  • <розмір> <розмір> — вказує місце розташування (перше значення — по горизонталі і друге — по вертикалі, відповідно) з використанням прийнятих в CSS розмірних величин.
  • <розмір> — горизонтальне положення тла, вказане одним з прийнятих в CSS розмірних величин. Вертикальне значення буде рівним 50% (посередині).
  • left top — верхній лівий кут — те ж саме, що 0% 0% або top left.
  • top — посередині, нагорі. Те ж саме, що і 50% 0%, top center, center top.
  • right top — верхній правий кут. Те ж саме, що і 100% 0%, top right.
  • left — зліва, посередині. Те ж саме, що і 0% 50%, left center, center left.
  • center — по центру. Те ж саме, що і 50% 50%, center center.
  • right — праворуч, посередині. Те ж, що і 100% 50%, right center, center right.
  • left bottom — знизу ліворуч. Те ж саме, що і 0% 100%, bottom left.
  • bottom — посередині, внизу. Те ж, що і 50% 100%, center bottom, bottom center.
  • right bottom — правий нижній кут. Те ж саме, що і 100% 100%, bottom right.

Як ти помітив з цих прикладів, ключові слова це скорочення від відсотків, адже лаконічніше сказати top right ніж 0% 100%. Тому використовуй їх це полегшить сприйняття інформації.

Допустимо вказувати кілька зміщень для кожного тла, перераховуючи значення через кому.

Також підтримуються від’ємні значення. Вони встановлюють обернені зміщення, найчастіше при таких зміщеннях тло виходить за кордони елемента.

Отже:

  • якщо дано тільки одне значення, то воно застосовується до горизонтального зміщення, при цьому вертикальне дорівнюватиме 50% (посередині), але коли застосовуються ключові слова, то їх порядок не має значення, браузер все визначить самостійно. горизонтальне зміщення може бути вказано за допомогою ключових слів — left, center, right, а вертикальне — top, center, bottom. Крім використання ключових слів, зміщення також можна задавати величини у відсотках, пікселях або інших одиницях. також ти мав, зрозуміти, що center 10% та 10% center будуть мати різний результат.* Комбінація ключових слів може бути вказана в будь-якому порядку, в той же час за комбінацією величини і ключового слова треба слідкувати, тому, що якщо першим значенням є величина (а перше значення обов’язково вказує на горизонтальне зміщення), то другим значенням не можуть бути ключові слова, такі як left та right, а от top та bottom можуть.

Приклад:

/* Правильно */

left center;

center left;

10px top

30% bottom

left 30%;

/* Неправильно */

30% left;

10px right;

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

background-position: value;

Властивість background-position може отримувати 4 значення:

x% y%

Перше значення є горизонтальне положення, а друге значення це вертикальна.

Верхній лівий кут 0% 0%. У нижньому правому куті на 100% 100%. Якщо вказати тільки одне значення, інше значення становитиме 50%.

xpos ypos

Перше значення є горизонтальне положення, а друге значення це вертикальна. Верхній лівий кут дорівнює 0 0. Одиниці можуть бути пікселі (0px 0px) або будь-які інші одиниці CSS. Якщо вказати тільки одне значення, інше значення становитиме 50%. Ви можете змішати % і позиції

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента (якщо відповідна властивість встановлена)

Значення без задання:0% 0%
Наслідує:Ні
Анімується:Так
JavaScript синтаксис:object.style.backgroundPosition=»center»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
одне тло

1. 0

4.0

1.0

1.0

3.5

декілька тла

1.0

9.0

3.6

1.3

10.5

Переглядач
одне тло

2.1

1.0

3.2

декілька тла

2. 1

1.0

3.2

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3
  • Приклад 4
  • Приклад 5
  • Приклад 6

Динамічний приклад

Демонстрація роботи властивості
Демонстрація роботи властивості
Демонстрація роботи властивості
background-position для різної кількості значень
Синтаксис властивості
.box {


  background-position: 25% 45px; 


}
Додаткові посилання
background-color
background-size
background-image
background-blend-mode
background-attachment
background-repeat
background-origin
background-clip
background
 Стиль HTML DOM backgroundPosition Свойство 
 ❮ Предыдущий
❮ Справочник по объектам стиля
Далее ❯
 Пример 
 Изменить положение фонового изображения:
 document. body.style.backgroundPosition = «справа вверху»;
 Попробуйте сами »
 Другие примеры «Попробуйте сами» ниже.
 Определение и использование 
 Свойство backgroundPosition устанавливает или возвращает положение фонового изображения
внутри элемента.
 Поддержка браузера 
 Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
 
 Собственность
 backgroundPosition 1,0 4,0 1,0 1,0 3,5
 Синтаксис 
 Вернуть свойство backgroundPosition:
  объект  .style.backgroundPosition
 Установите свойство backgroundPosition:
  объект  . style.backgroundPosition =  значение 
 Значения свойств 9002 7 
4 Описание вверху слева 
 вверху по центру 
 вверху справа 
 по центру слева 
 по центру по центру 
 по центру справа 
 внизу слева 
 внизу по центру 
 внизу справа Если указать только одно ключевое слово, другим значением будет «центр».  х% у%  Значение x указывает горизонтальное положение, а значение y указывает вертикальное положение. Верхний левый угол 0% 0%. Правый нижний угол 100% 100%. Если вы укажете только одно значение, другое значение будет равно 50%.  xpos ypos  Значение x указывает горизонтальное положение, а значение y указывает вертикальное положение. Верхний левый угол равен 0 0. Единицами могут быть пиксели (0px 0px) или любые другие единицы CSS. Если вы укажете только одно значение, другое значение будет равно 50%.
  Вы можете смешивать % и единицы начальный Устанавливает для этого свойства значение по умолчанию. Читать про  начальный  унаследовать Наследует это свойство от родительского элемента. Читать о  унаследовать 
 Технические детали 
 Значение по умолчанию: 0% 0%
 Возвращаемое значение: Строка, представляющая позицию фонового изображения
 Версия CSS CSS1
 Дополнительные примеры 
 Пример 
 Изменить положение фонового изображения в элементе
 по центру снизу:
 document.getElementById(«myDiv»).style.backgroundPosition = «center bottom»;
 Попробуйте сами »
 Пример 
 Измените положение фонового изображения в элементе
 на 200 пикселей по горизонтали и 40 пикселей
вертикальный:
 document.
 
 getElementById(«myDiv»).style.backgroundPosition = «200px 40px»; 
 Попробуйте сами »
 Пример 
 Вернуть позицию фонового изображения в элементе
:
 document.getElementById(«myDiv»).style.backgroundPosition; 
 Попробуйте сами »
 Связанные страницы 
 Учебник CSS: Фон CSS
 Ссылка CSS: свойство background-image
 Справочник CSS: свойство background-position
 Ссылка HTML DOM: свойство фона
 ❮ Назад
❮ Справочник по объектам стиля
Далее ❯
 
 НОВИНКА
 Мы только что запустили 
 Видео W3Schools
 Узнать
 ВЫБОР ЦВЕТА 
 КОД ИГРЫ 
 Играть в игру
 Top Tutorials 
 Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 Учебное пособие 
 Учебное пособие по SQL 
 Учебное пособие по Python 
 Учебное пособие по W3. CSS 
 Учебное пособие по Bootstrap 
 Учебник по PHP 
 Учебник по Java 
 Учебник по C++ 
 Учебник по jQuery 
 Основные ссылки 
 HTML Reference 
 CSS Reference 
 JavaScript Reference 
 SQL Reference 
 Python Reference 
 W3.CSS Reference 
 Bootstrap Reference 
 PHP Reference 
 HTML Colors 
 Java Reference 
 Angular Reference 
 jQuery Reference 
9 Top7 Examples
Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Как сделать Примеры 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2022 Refsnes Data. Все права защищены. 
 W3Schools работает на основе W3.CSS.
 css — Как разместить фоновое изображение на абсолютном расстоянии справа от его контейнера? 
 спросил 
 Изменено
 5 лет, 3 месяца назад
 Просмотрено
 33 тысячи раз
 Я могу разместить небольшое фоновое изображение/значок в 4 пикселях от центра слева от его контейнера с помощью:
 background: url(...) no-repeat 4px 50%;
 
 Как я могу расположить его на 4 пикселя от  справа от  ?
 4
 В зависимости от вашей ситуации и поддерживаемых браузеров это работает (проверено на IE7-8, Firefox):
 background: url(. ..) no-repeat right 50%; граница справа: 4 пикселя сплошная прозрачная;
 
 Конечно, если вы уже ставите бордюр справа, это вам никак не поможет.
  Добавлено при редактировании:  Если вышеизложенное не работает, потому что вы используете границу, и вам все равно на IE7 (еще не уверен, что мы совсем в этом месте), и ширина вашего «значка» известна , то вы можете сделать:
 .yourContainer {
  положение: родственник;
}
.yourContainer: после {
  содержание: ' ';
  дисплей: блок;
  положение: абсолютное;
  сверху: 0;
  внизу: 0;
  справа: 4 пикселя;
  ширина: 10 пикселей; //ширина иконки
  z-индекс: -1; //заставляет его действовать как фон
  фон: url(...) без повторов справа 50%;
}
 
 1
 CSS3 добавляет новый способ указания  background-position  :
 background-position: right 10px top 50%;
 
 Фоновое изображение следует располагать на расстоянии 10 пикселей справа и по центру по вертикали.
 2
 как насчет
 background: url(...) no-repeat right 50%;
отступ: 0px;
заполнение справа: 4px;
 
 на случай, если вам когда-нибудь понадобится рамка
 Насколько мне известно, вы не можете.
 Популярные приемы:
  •  Добавление к изображению прозрачного поля шириной 4 пикселя и придание
it  background-position: right 
  •  Добавление 4px  margin-right  к элементу (работает в некоторых ситуациях, не работает в других)
  •  Использование jQuery для определения веса элемента и настройки положения изображения (фу!)
 0
 Вы можете использовать проценты:
 
 table.dataTable thead .sorting_asc {
 фон: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") без повторов 30% 50%;
}
table.dataTable thead .sorting_desc {
 фон: url("http://cdn.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *