Background position html: background-position | htmlbook.ru

html — Как понять работу свойства background-position дисциплины css

Изучаю css и добрался до темы оформления, а именно до свойства background-position. Столкнулся с непониманием работы данного свойства. Начну попорядку. Имеется блок размерами 500×400 px, внутри которого в качестве фона находится картинка. Она имеет размеры 200×200 px. При значении center у вышеуказанного свойства картинка в аккурат располагается по цетру вышеупомянутого блока. Тот же эффект достигается когда вместо слова center используются 50%. Здесь всё логично и не вызывает вопросов. И в начале при данном раскладе складывается впечатление что расположение картинки расчитывается так 400px * 50% = 200px. 200px от верхней края блока до центра картинки. Нетрудно вычислить растояние от верхнего края блока до верхнего края картинки оно будет равняться растоянию до центра картинки(равно центра блока) минус половина высоты картинки т.е.: 200px — 100px = 100px. Всё элементарно. Математика уровня начальных классов. Но такое представление работает до тех пор пока не меняешь 50% сначало на 40% потом на 30% и вот когда доходишь до 20% и считаешь с этими значениями получаешь полный абсурд. Итак по выше указанной схеме: 400px * 20% = 80px(расстояние до центра картинки). Уже что-то не то, не правда ли?! Идём дальше посчитаем расстояние от верхнего края блока до верхнего края картинки. 80px — 100px = -20px. Т.е. получается наша картинка должна выйти за верхний край блока. Но что-то я этого не вижу. Вышеописанные рассуждения поселили в мой разум зерно сомнения. Я отошёл от компьютера взял лист бумаги в клетку и начал рисовать. Но на бумаге появлялся тот же абсурд! Тогда меня посетила одна гениальная мысль: Значит при позиционировании вычисление расстояния производиться не использованием высоты блока, а с использованием высоты картинки и точкой отсчёта является любая из множества верхней стороны картинки. Сейчас поясню. 200px(высота картинки) * 50% = 100px. Что собственно и видно на первой картинке. Если мы также возьмём 20% то получим 200px * 20% = 40px, что опять же похоже на правду, судя по второму скриншоту.

И казалось бы всё секрет свойства раскрыт и можно идти дальше. Если бы не одно НО. Такие рассуждения натолкнули меня на мысль, что если это работает с одной картинкой таких размеров, то это должно работать и с картинками других размеров. Для примера я взял другую картику размерами 300×300 px. Далее по получившейся у меня схеме 300px(высота картинки) * 50% = 150px, что уже вызывает большие сомнения т.к. невооруженным глазом видно что на первом скриншоте видно что растояние от верхнего края блока до верхнего края картинки больше, нежели чем на третьем. Значит и вторая схема потерпела неудачу. Из всех проведенных исследований возникает логичный вопрос как это всё на самом деле разуметь. У меня всегда была в школе твёрдая четверка по геометрии. Проделав все эти логичные рассуждения напрашивается 2 вывода: Либо я нахрен забыл всю геометрию за 5-й класс(что очень и очень сомнительно), либо данноё свойство разрабатывал какой-то гуманитарий-извращенец, раз я человек изучивший 2 ЯП (js и php) никак не могу въехать в эту «логику» и вместо того чтобы продолжать дальше разбор тем из данной дисциплины уже 1,5 часа пишу этот вопрос и час до этого потратил на выяснение данного вопроса. Есть кто из вас разобрался с этим вопросом, будьте добры напишите формулу. Самому мне её выводить уже мягко говоря наскучило. Прикладываю скрины вёрстки:

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 задает или возвращает положение фонового изображения.
внутри элемента.
 См. также: 
 Стили HTML: Свойство background
 Учебник CSS: Фоны CSS
 Учебник CSS3: Фоны CSS3
 Справочник CSS: Свойство background-image
 Справочник CSS: Свойство Thr background-position
 Синтаксис 9 0016 
 Вернуть Свойство backgroundPosition:
  объект  .style.backgroundPosition
 Установите свойство backgroundPosition:
  объект  .style.backgroundPosition =  значение 
 Значения свойств 
 Значение
 Описание
 вверху слева 
 вверху по центру 
 вверху справа 
 по центру слева 
 по центру по центру 
 по центру справа 
 внизу слева 
 внизу по центру 
 внизу справа
 Если указать только одно ключевое слово, другим значением будет «центр».
  х% у% 
 Значение x указывает горизонтальное положение, а значение y указывает вертикальное положение. Верхний левый угол 0% 0%. Правый нижний угол 100% 100%. Если вы укажете только одно значение, другое значение будет равно 50%.
  xpos ypos 
 Значение x указывает горизонтальное положение, а значение y указывает вертикальное положение. Верхний левый угол равен 0 0. Единицами могут быть пиксели (0px 0px) или любые другие единицы CSS. Если вы укажете только одно значение, другое значение будет равно 50%. Вы можете смешивать % и единицы
 начальный
 Устанавливает для этого свойства значение по умолчанию. Читать про  начальный 
 унаследовать
 Наследует это свойство от родительского элемента. Читать о  унаследовать 
 Технические детали 
 Значение по умолчанию:
 0% 0%
 Возвращаемое значение:
 Строка, представляющая позицию фонового изображения
 Версия CSS
 CSS1
 Поддержка браузера 
  backgroundPosition  — это CSS1 (1996) особенность.
 Полностью поддерживается во всех браузерах:
 Хром
 Край
 Фаерфокс
 Сафари
 Опера
 ИЭ
 Да
 Да
 Да
 Да
 Да
 Да
 Другие примеры 
 Пример 
 Изменить положение фонового изображения в элементе
 на центр внизу:
 document.getElementById(«myDiv»).style.backgroundPosition = «в центре внизу»;
 Попробуйте сами »
 Пример 
 Измените положение фонового изображения в элементе
 на 200 пикселей по горизонтали и 40 пикселей
по вертикали:
 document.getElementById(«myDiv»).style.backgroundPosition = «200px 40px»; 
 Попробуйте сами »
 Пример 
 Вернуть позицию фонового изображения в элементе
:
 document. getElementById(«myDiv»).style.backgroundPosition; 
 Попробуйте сами »
 ❮ Предыдущая
❮ Справочник по объектам стиля
Следующий ❯
 
 ВЫБОР ЦВЕТА 
 Лучшие учебники 
 Учебник HTML 
 Учебник CSS 
 Учебник JavaScript 
 Учебник How To 
 Учебник 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 
 902 08 Лучшие примеры Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 How To Примеры 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2023 Refsnes Data. Все права защищены. 
 W3Schools работает на основе W3.CSS.
 Все, что вам нужно знать о background-position 
   Преобразование одного из моих ответов о переполнении стека в сообщение  
 Содержание 
 Значения пикселей
 Процентные значения
 Как насчет градиентов?
 Подробнее
 Отрицательные значения (< 0%)
 Большие значения (> 100%)
 Особые случаи
 Соотношение между пикселями и процентными значениями
 Изменение ссылки
 Объединение значений пикселей и процентов
 Использование background-origin
 Заставить процент вести себя как пиксель
 При работе с  background-position  мы имеем две типичные ситуации:
 Мы используем значение пикселя (тривиальное)
 Мы используем процентное значение (хитрое)
 Давайте начнем подробное объяснение и удалим всю двусмысленность вокруг  background-position  !
 Пиксельные значения 
 При использовании значений в пикселях эталоном является верхний/левый угол изображения независимо от его размера. Это похоже на использование top/left с позиционированным элементом:
 Обратите внимание, что другие единицы, такие как  em  ,  ch  и т. д., ведут себя так же, как  px  . Они называются длинами. Наше сравнение можно обобщить до  длина  против  процент  . Все, что вам нужно знать, это то, как каждая длина преобразуется в пиксели.
 Процентные значения 
 При использовании процентных значений ссылка отличается от при использовании значений в пикселях; это больше не верхний/левый угол:
 В этом случае нам нужно учитывать два параметра: размер контейнера И размер изображения. Вот иллюстрация того, как это работает (я взял  background-position  равным  30% 30%  ):
 Сначала мы рассматриваем изображение, чтобы найти опорную точку, которую мы будем использовать для размещения изображения. Это точка  внутри изображения , расположенная на  30% 30%  от верхнего/левого угла, учитывая размер  изображения  (как определено зелеными линиями). Затем мы помещаем эту точку  внутрь контейнера  на  30% 30%  от верхнего/левого угла, учитывая  размер контейнера  .
 Исходя из этой логики, мы можем идентифицировать некоторые тривиальные случаи, такие как
            50% 50%   (в центре)              100% 100%   (внизу) справа)               100% 0%   (вверху справа) 
 Вот полный список общих значений и их эквивалентность:
  слева  =  слева по центру  =  по центру слева  =  0 50% 
  справа  =  справа по центру  =  по центру справа  =  100% 50% 
  верх  =  верх центр  =  центр верх  =  50% 0 
  низ  =  низ центр  =  центр низ  =  50% 100% 
  центр  =  центр центр  =  50% 50% 
  вверху слева  =  слева вверху  =  0% 0% 
  вверху справа  =  справа вверху  =  100% 0 
  внизу слева  =  слева внизу  =  0 100% 
  внизу справа  =  справа внизу  =  100% 100% 
 Теперь понятно, что если размер изображения  равен  размеру контейнера, то при использовании процентных значений ничего не произойдет просто потому, что все позиции эквивалентны. Верхняя/левая часть изображения уже находится в верхней/левой части (  0% 0%  ) контейнера, центр уже в центре (  50% 50%  ) и т. д.
 🏆 Первое золотое правило при использовании процентных значений:  размер изображения должен отличаться от размера контейнера 
 А градиенты? 
 Приведенная выше логика применяется к градиентам, поскольку градиенты считаются изображениями, и по умолчанию, если вы не укажете  background-size  , размер градиента равен  будет размером его контейнера  , в отличие от использования изображения. Это основная проблема, с которой сталкивается каждый разработчик при работе с градиентами.
 Если мы обратимся к спецификации  background-size  , мы увидим, как возникает проблема:
 Если оба значения автоматические, то  следует использовать внутреннюю ширину и/или высоту изображения. Если изображение не имеет ни собственной ширины, ни собственной высоты, его размер определяется как для  содержат  .
 И
 содержат
 Масштабируйте изображение, сохраняя при этом его внутреннее соотношение сторон   (если оно есть), до наибольшего размера, чтобы его ширина и высота могли поместиться в области позиционирования фона.
 А также:
 Растровое изображение (такое как JPG)  всегда  имеет внутренние размеры и пропорции.
 CSS  <градиент>  s  не имеют внутренних размеров или внутренних пропорций   исх. 
 Изображение всегда имеет внутренние значения, поэтому в большинстве случаев оно не будет иметь тот же размер, что и его контейнер, поэтому  background-position  с единицами измерения в процентах будет иметь эффект. Градиенты не имеют внутренних значений, поэтому размеры градиента будут равны размеру его контейнера, а  background-position  с процентными значениями никогда не будет работать, если мы не укажем  background-size , отличный от размеров его контейнера.
 🏆 Второе золотое правило при использовании значений вероятности:  при использовании градиента всегда определяйте размер фона 
 Подробнее 
 В приведенных выше примерах мы видели, как  background-size  работает при использовании значений между  0%  и  100%  , но как насчет использования отрицательных значений или значений, превышающих  100%  ? Логика та же, но найти точку отсчета будет сложнее.
 Отрицательные значения (
< 0%)
 Предположим, мы хотим разместить фон по адресу  -50% 0  . В этом случае контрольная точка будет находиться за пределами изображения. Вот пример: https://jsfiddle.net/no87qv2r/4/
 Как мы видим на иллюстрации, мы сначала рассматриваем  -50%  изображения, то есть  -50px , чтобы определить наша контрольная точка (т.е.  -50px  от левого края изображения). Затем мы помещаем эту точку на  -50% , учитывая размер контейнера (  -100px  от левого края контейнера). Затем мы рисуем изображение, и мы получаем вышеуказанный результат. Видно только  100px  изображения.
 Мы также можем заметить, что отрицательные процентные значения ведут себя так же, как и отрицательные фиксированные значения, когда размер изображения на 90 353 меньше, чем на 90 354 размер контейнера (в обоих случаях изображение сместится влево). В этом случае  -50% 0  совпадает с  -50px 0  (https://jsfiddle.net/no87qv2r/5/).
 Если, например, мы увеличим размер изображения до  150px 150px  ,  -50% 0  будет таким же, как  -25px 0  .
 Когда мы делаем размер больше контейнера, отрицательные значения начинают смещать изображение вправо (как и при положительных значениях пикселей), что логично, поскольку  50%  изображения будут увеличиваться, а  50%  контейнера останется прежним.
 Если мы рассмотрим предыдущую иллюстрацию, это похоже на увеличение верхней зеленой линии, пока она не станет больше, чем нижняя. Таким образом, одного только знака недостаточно, чтобы знать, как будет сдвинуто изображение; мы должны также рассмотреть размер.
 То же самое логически применимо к градиентам:
 Обратите внимание на использование следующего синтаксиса
  background:linear-gradient(to right,red,blue) -50% 0/50px 150px no-repeat 
 что означает
  background:[изображение или градиент] [позиция фона]/[размер фона] без повтора 
 Большие значения (> 100%) 
 Та же логика, что и раньше: если мы определим фон в  150% 0  , то мы будем считать нашу контрольную точку  150%  от левого края (или  50%  от правого края), далее размещаем  150%  от левого края контейнера: https://jsfiddle.net/no87qv2r/9/ (в в этом примере  150% 0  эквивалентно  150px 0  )
 Если мы начнем увеличивать размер фона  , мы получим такое же поведение, как показано ранее:
 Особые случаи 
 Использование значений вне диапазона  [0% 100%]  позволяет нам скрыть фоновое изображение, но как нам найти точные значения, чтобы полностью скрыть изображение?
 Рассмотрим следующую иллюстрацию:
 Наше изображение имеет ширину  Ws  и ширину контейнера  Wp , и нам нужно найти значение  p  . Из рисунка можно получить следующую формулу:
  p * Wp = p * Ws + Ws <=> p = Ws/(Wp - Ws) с p в [0,1] 
 Если размер контейнера  200px  и изображение  100px , тогда p равно  1 , поэтому  100%  (конечно, мы добавляем отрицательный знак, и это  -100%  ).
 Мы можем сделать это более общим, если рассмотрим процентные значения с  background-size  вместо фиксированных значений. Предположим, что размер фона   равен  S%  . Тогда у нас будет
  Ws = Wp * s (s в [0,1] и S=s*100) 
 Первая формула будет:
  p = Ws/(Wp - Ws) <= > p = s / (1 - s) 
 Добавляем знак минус и получаем  p = s / (s - 1) 
 Теперь, если мы хотим скрыть изображение с правой стороны, мы делаем ту же логику справа (мы рассматриваем зеркало предыдущей иллюстрации), но так как мы всегда будем учитывать левый край, чтобы найти процент, который нам нужно добавить  100%  .
 Мы определяем  p'%  равным  100% + p%  , и формула будет
  p' = 1 + p <=> p' = 1 + s / (1 - s ) = 1 / (1 - s) 
 Вот анимация, иллюстрирующая приведенный выше расчет:
 Давайте посчитаем некоторые значения:
 Когда  s=0.5  , у нас есть  background-size  равный  50%  , а процентные значения будут от  -100%  до  2 00%  . В этом случае мы начали с отрицательного значения и закончили с положительным, потому что размер изображения  меньше  размера контейнера. Если мы рассмотрим последний случай (  s=2  ), то размер фона   равен  200%  , а процентные значения будут от  200%  до  -100%  . Мы начали с положительного значения и закончили отрицательным, потому что размер изображения  больше , чем размер контейнера.
 🏆 У нас есть третье золотое правило:  для смещения изображения влево нам нужны отрицательные значения, если размер меньше размера контейнера, но нам нужны положительные значения, если размер больше размера контейнера (то же самое для правого)  .
 Соотношение между пикселями и процентными значениями 
 Давайте определим способ вычисления процентных значений на основе значений пикселей или наоборот (т. е. формулу для преобразования между ними). Для этого нам просто нужно рассмотреть опорные точки.
 При использовании значений пикселей мы будем учитывать синие линии, и у нас будет  background-position:X Y  .
 При использовании процентных значений мы будем рассматривать зеленые линии, и у нас будет  background-position:Px Py  .
 Формула будет следующей:  X + Px * Ws = Px * Wp , где  Ws  — ширина изображения, а  Wp  — ширина контейнера (та же формула для оси Y с учетом высоты ).
 У нас будет  X = Px * (Wp - Ws)  . Используя эту формулу, мы можем подтвердить объясненные ранее золотые правила:
 Когда  Wp = Ws  , формула больше недействительна, что подтверждает, что процентные значения не действуют, когда размер изображения совпадает с размером контейнера; таким образом, нет никакой связи между значениями пикселей и процентами.
  X  и  Px  будут иметь одинаковый знак, когда  Wp > Ws , и противоположный знак, когда  Wp < Ws . Это подтверждает, что процентные значения ведут себя по-разному в зависимости от размера изображения.
Мы также можем выразить формулу по-другому, если рассмотрим процентные значения  background-size  . У нас будет  X = Px * Wp * (1 - s)  .
 Вот анимация, иллюстрирующая приведенный выше расчет:
 Изменение ссылки 
 В приведенных выше расчетах мы всегда учитывали верхний/левый угол изображения и контейнер, чтобы применить нашу логику либо к значениям в пикселях, либо к процентным значениям. Эту ссылку можно изменить, добавив дополнительные значения к  background-position  .
 По умолчанию  background-position: X Y  эквивалентно  background-position: left X top Y  (положение по X слева и по Y сверху). Регулируя  сверху  и/или  слева  мы меняем ссылку и способ размещения изображения.
 Вот несколько примеров:
 Понятно, что со значением  X  мы можем использовать только  слева  и  справа  (горизонтальное положение), а со значением  Y  мы можем использовать только  снизу  и  топ  (вертикальное положение). Со всеми различными комбинациями мы логически получаем 4 разных угла.
 Эта функция также полезна для оптимизации некоторых вычислений. В примере с разделом особых случаев мы сделали первый расчет, чтобы скрыть изображение слева, а затем еще один, чтобы скрыть его справа. Если мы рассмотрим возможность изменения эталона, нам нужно будет сделать только один расчет. Мы берем формулу, используемую для левой стороны, и используем ее для правой стороны.
 Вот новая версия:
 Для  s=0.5  мы больше не будем анимировать от  -100%  до  200%  НО будет от  осталось -100%  до  справа -100%  .
 Вот еще один пример с использованием значений пикселей, где мы можем увидеть, как легко справиться с вычислениями при изменении ссылки:
 Было бы сложно добиться той же анимации, сохраняя ту же ссылку.
 🏆 Еще одно золотое правило:  если вы хотите иметь симметричную анимацию, сделайте свою логику на одной стороне и используйте то же самое на другой стороне, изменив ссылку  .
 Объединение значений пикселей и процентов 
 Мы можем использовать  calc()  для выполнения сложных вычислений, в которых участвуют разные единицы измерения. Например, мы можем написать  width:calc(100px + 20% + 12em) , и браузер рассчитает вычисленное значение с учетом того, как работает каждая единица, и мы закончим значением в пикселях (для этого случая).
 Как насчет  background-position  ? Если мы напишем  calc(50% + 50px)  , будет ли это оцениваться как значение в процентах или значение в пикселях? будет ли значение пикселя преобразовано в проценты или наоборот?
 Результат не будет преобразован в значение в пикселях или в процентное значение, а будет использоваться вместе.  background-position  имеет особое поведение при смешивании процентных значений и значений пикселей внутри  calc() , и логика следующая:
 Сначала мы используем процентное значение для позиционирования изображения, применяя всю логику, связанную с процентными значениями.
 Мы рассматриваем положение (1) в качестве эталона и используем значение пикселя для повторного позиционирования изображения, применяя всю логику, связанную со значениями пикселей.
 Выполнение  calc(50% + 50px)  означает: центрировать изображение, затем сдвинуть его на  50px  влево.
 Эта функция может упростить многие вычисления. Вот пример:
 Было бы утомительно находить правильные значения в процентах или пикселях для размещения 4 красных квадратов, как показано выше, но путем смешивания обоих с помощью  calc()  это довольно легко.
 Теперь предположим, что у нас есть что-то вроде этого:  calc(10% + 20px + 30% + -10px + 10% + 20px)  . Как с этим справится браузер?
 В таких случаях браузер сначала оценит каждую единицу для получения упрощенной формы  calc(X% + Ypx) , а затем применит приведенную выше логику для позиционирования изображения. 
 расчет (10% + 20 пикселей + 30% + -10 пикселей + 10% + 20 пикселей)
вычислить((10% + 30% + 10%) + (20px + -10px + 20px))
расчет(50% + 30px)
 
Войти в полноэкранный режимВыйти из полноэкранного режима
 Пример: https://jsfiddle. net/no87qv2r/17/
 Какой бы ни была сложность формулы, браузер всегда будет оценивать значения в процентах и ​​пикселях отдельно.
 Здесь больше эквивалентных значений, если учесть  calc()  :
  слева X сверху Y  =  X Y 
  справа X сверху Y  =  вычисл(100% - X) Y 
  слева X снизу Y  =  X вычисл(100% - Y) 
  справа X снизу Y  =  вычисл(100% - X) вычисл(100% - Y) 
  X  и  Y  - это значения  пикселей , а не проценты!
 Использование фона-происхождения 
 Вот еще одно важное свойство, которое можно использовать для изменения положения фонового изображения. Это свойство основано на блочной модели, поэтому давайте быстро напомним, как это работает:
 Внутри каждого элемента есть 3 разных блока: граничный блок, отступ и блок содержимого.  background-origin  указывает, какое поле нам нужно учитывать, чтобы выполнить все наши предыдущие вычисления.
 Вот наглядный пример:
 Понятно, что когда у нас нет padding  content-box  эквивалентно  padding-box  , когда у нас нет рамки  border-box  эквивалентно  padding-box  , и без заполнение и отсутствие границы, все 3 эквивалентны.
 Важно отметить, что это свойство влияет на  background-size  при использовании с процентными значениями.
 У нас также есть свойство  background-clip , но оно не влияет на расчет. Это влияет только на визуальный результат, обрезая часть фона.
 Заставить проценты вести себя как пиксели 
 В случае, если нам нужно, чтобы размер изображения (или градиента) был равен размеру контейнера, и перемещать его, используя проценты, такие как пиксели, мы можем рассмотреть следующие идеи.
 Использование псевдоэлемента в качестве фонового слоя 
 Следует отметить, что translate учитывает размер псевдоэлемента, но, поскольку он такой же, как контейнер, у нас не возникнет никаких проблем. Мы также можем использовать  слева  /  сверху , но  преобразование  будет иметь лучшую производительность. Используя этот метод, мы не можем иметь повторения.
 Использование фона-происхождения 
 Хитрость заключается в том, чтобы иметь некоторые отступы, ограничить источник  полем содержимого  и сделать размер больше, чем  100% , чтобы покрыть отступы и чтобы изображение снова заполнило контейнер.
 В приведенном выше отступе я сделал отступ равным половине размера, поэтому по логике мне нужно использовать  200%  в  background-size  исправить. Для  background-position  теперь легко найти необходимое значение на основе предыдущего объяснения.
 Другой пример:
 Используя этот метод, мы можем иметь повторение, но так как мы добавляем отступы, мы не сможем добавить содержимое. Чтобы преодолеть это, мы можем объединить оба метода, чтобы получить следующее:
 Вот и все! 
 Теперь у  background-position  больше нет секретов для вас.
No related posts.