Всюду, где я читаю, это должно работать нормально, но по какой-то причине это не так.
Это должно было исправить что-то еще, так что исправление не имеет значения для меня, я просто хочу знать, почему. Проблема заключается в .br .bg-image . Я знаю, что я пытаюсь использовать calc() , но использование простого background-position: 50% тоже не работает.
Решение проблемы
После некоторых попыток я обнаружил, что вызывает проблему. background-position перестает работать, когда фон является таким же большим (или большим), как и его фрейм. Это также объясняется тем, почему работает разумное решение. Он удаляет background-size .
В качестве доказательства я изменил CSS .br -frame и .br .bg-image на следующее:
Таким образом, background-size больше не равен кадру, заставляя background-position работать так, как предполагается.
Почему
Причина, по которой это не работает с процентами, заключается в том, что background-position зависит от background-size , буквально. Поскольку background-position: 0% 0%; — верхний левый, а background-position: 100% 100%; — нижний правый. Если фоновое изображение является таким же большим, как и содержащий фрейм, больше нет разницы между 0% и 100%.
Используя эту теорию в сочетании с calc() , все, что она делает, это:
calc(100% — 340px — 30px) поместите его вправо (100%), который вообще не перемещает его, а затем переместите его в 370 пикселей (-340 пикселей — 30 пикселей) влево.
В вашем случае он идет вправо, потому что вы префикс right перед вашим calc() .
background-position
Initial value 0% 0%
относятся к размеру области фонового позиционирования минус размер изображение на заднем плане; размер относится к ширине для горизонтальных смещений и к высоте для вертикальных смещений
Таким образом, любые различия в размере фонового изображения и размере элемента приветствуются, и что делает фоновые позиционирования работы с процентами. В противном случае они этого не делают.
Пример:
Рассмотрим изображение с размером 500X500 px , Используя background-position: 50% 50%; Если ваш div имеет ширину 600px , ваше фоновое изображение будет смещено вправо с помощью 50% * (600px — 500px) , что 50px Аналогично, если div имеет высоту 700px , ваше фоновое изображение будет сдвинуто вниз на 50% * (700px — 500px) , то есть 100px
В случае, если div уже, чем изображение Теперь вы являетесь элементом div 300X400 px , и вы хотите поместить фоновое изображение так же, как раньше (50px right and 100px down) Вам нужно будет указать отрицательный background-position: -25% -100%; Поскольку -25% * (300-500) = 50px и -100% (400-500) = 100px
В случае, когда оба div и изображения имеют одинаковый размер: Любой процент, указанный вами в background-position , будет умножен на ноль. И изображение будет всегда выровнено с верхним левым углом div. Чтобы исправить это, сделайте изображение меньше или больше, сбросив background-size:80% or 120%;
У меня есть 3 тега, замаскированные под «кнопки перелистывания».
Каждая кнопка получает свое исходное изображение из CSS следующим образом:
Теперь, когда я пытаюсь назначить исходное положение фона для каждого конкретного элемента как такового:
Проблема: каждая кнопка по умолчанию имеет значение 0 0
Обратите внимание, что позиции наведения работают как ожидалось.
Я сейчас как-то болен, так что это, вероятно, недосмотр, но сейчас я занимаюсь этим в течение часа и не могу понять.
РЕДАКТИРОВАТЬ пастебиновая любовь
Я не воспроизвожу вашу проблему. Какой браузер?
Первоначальная мысль (не видя случая ошибки) заключается в том, чтобы изменить исходное определение фона из полного «фона:» в объявление фонового изображения:
Установив фон, который является контейнером для фонового положения, некоторые браузеры могут иметь проблемы со специфическими проблемами.
Разделите сокращенное свойство «background».
Если вы опустите одну из записей в сокращенном свойстве, пропущенная запись будет reset по умолчанию, а не просто оставлена одна.
Итак, что происходит больше или меньше, эквивалент этого:
Разбейте стенографию на разные записи:
EDIT: в вашем коде значения background-position появляются после значений background . Но я уверен, что селектор #buttons .button более специфичен, чем #retain-our-firm и аналогичные селекторы, что означает, что его правило имеет приоритет над другими, хотя другие приходят после.
У меня есть 3 тега, замаскированных под «кнопки переворачивания».
Каждая кнопка получает свое начальное изображение из CSS следующим образом:
Теперь, когда я пытаюсь назначить начальную фоновую позицию для каждого конкретного элемента как таковую:
Проблема: каждая кнопка по умолчанию установлена в положение 0 0
Обратите внимание, что позиции при наведении работают должным образом.
Я сейчас немного болею, так что это, вероятно, недосмотр, но я уже несколько часов нахожусь в этом состоянии и не могу понять.