Background position css не работает

css background-position not working

I have 3 a tags disguised as «roll over buttons».

Each button is getting its initial image from the CSS as follows:

Now, when i try to assign initial background position for each specific element as such:

The Issue: each button defaults to position 0 0

Note that the hover positions work as expected.

I’m kind of sick right now so this is probably an oversight but I’ve been stairing at this for an hour now and can’t figure it out.

6 Answers 6

I’m not reproducing your issue. Which browser?

Initial thought (without seeing an error case) is to change your initial background definition from a full ‘background:’ to a background-image declaration:

By setting background, which is a container for background-position, some browsers may have issues with specificity issues there.

Split up the «background» shorthand property.

If you omit one of the entries in a shorthand property, the omitted entry is reset to the default rather than simply being left alone.

So what’s happening is more-or-less the equivalent of this:

Break the shorthand into different entries:

EDIT: In your code, the background-position values come after the background values. But I’m pretty sure that the #buttons .button selector is more specific than the #retain-our-firm and similar selectors, meaning that its rule takes precedence over the others even though the others come after.

Источник

CSS background-позиция не работает

у меня есть 3 метки, замаскированные под»кнопки переката».

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

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

Вопрос: каждая кнопка по умолчанию занимает позицию 0 0

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

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

редактировать пастебин любовь http://pastebin.com/SeZkjmHa

6 ответов

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

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

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

разделите свойство стенографии» background».

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

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

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

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

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

у меня была точно такая же проблема, позиционирование работает в Chrome и т. д., Но не в Firefox.

потребовалось так много времени, чтобы понять глупый ответ,

Источник

background-position

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	2.1+	1.0+
3	9.0+		1.0+	10.5+	1.3+	3.6+	2.1+	1.0+

Краткая информация

Значение по умолчанию	0% 0%
Наследуется	Нет
Применяется	К блочным элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/colors.html#propdef-background-position http://www.w3.org/TR/css3-background/#the-background-position

Версии CSS

Описание

Задает начальное положение фонового изображения, установленного с помощью свойства background-image . В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис

= [left | center | right | | ] || [top | center | bottom | | ] | inherit.

Значения

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

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

В скобках указано, где располагается фоновый рисунок относительно контейнера.

При inherit значение наследуется у родителя элемента.

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundPosition

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

background-position

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

Синтаксис

Свойство 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.
• или

. Если другое значение является left или right , то оно определяет Y, относительно верхнего края. Если другое значение top или bottom , то оно определяет X, относительно левого края. Если оба значения или

, то первое определяет X, а второе Y.

• Если одно значение top или bottom , то другое значение не может быть top или bottom .
• Если одно значение является left или right , то другое значение не может быть left или right .

Это означает, например, что top top и left right являются недействительные.

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

Примеры

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

Источник

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%

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

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

Пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник