background position не работает

Всюду, где я читаю, это должно работать нормально, но по какой-то причине это не так.

Это должно было исправить что-то еще, так что исправление не имеет значения для меня, я просто хочу знать, почему. Проблема заключается в .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%

относятся к размеру области фонового позиционирования минус размер изображение на заднем плане; размер относится к ширине для горизонтальных смещений и к высоте для вертикальных смещений

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

Читайте также:  freedom planet 2 дата выхода

Пример:

Рассмотрим изображение с размером 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

Обратите внимание, что позиции наведения работают как ожидалось.

Я сейчас как-то болен, так что это, вероятно, недосмотр, но сейчас я занимаюсь этим в течение часа и не могу понять.

РЕДАКТИРОВАТЬ пастебиновая любовь http://pastebin.com/SeZkjmHa

Я не воспроизвожу вашу проблему. Какой браузер?

Первоначальная мысль (не видя случая ошибки) заключается в том, чтобы изменить исходное определение фона из полного «фона:» в объявление фонового изображения:

Установив фон, который является контейнером для фонового положения, некоторые браузеры могут иметь проблемы со специфическими проблемами.

Читайте также:  adobe photoshop cs6 как сделать русский язык

Разделите сокращенное свойство «background».

Если вы опустите одну из записей в сокращенном свойстве, пропущенная запись будет reset по умолчанию, а не просто оставлена ​​одна.

Итак, что происходит больше или меньше, эквивалент этого:

Разбейте стенографию на разные записи:

EDIT: в вашем коде значения background-position появляются после значений background . Но я уверен, что селектор #buttons .button более специфичен, чем #retain-our-firm и аналогичные селекторы, что означает, что его правило имеет приоритет над другими, хотя другие приходят после.

У меня есть 3 тега, замаскированных под «кнопки переворачивания».

Каждая кнопка получает свое начальное изображение из CSS следующим образом:

Теперь, когда я пытаюсь назначить начальную фоновую позицию для каждого конкретного элемента как таковую:

Проблема: каждая кнопка по умолчанию установлена ​​в положение 0 0

Обратите внимание, что позиции при наведении работают должным образом.

Я сейчас немного болею, так что это, вероятно, недосмотр, но я уже несколько часов нахожусь в этом состоянии и не могу понять.

Оцените статью
Все о Windows 10
Добавить комментарий