CSS background-position фиксируется для родителя - PullRequest
4 голосов
/ 28 апреля 2011

мой вопрос немного сложен, и я не совсем уверен, возможно ли это, но я думаю, у меня есть воспоминания о том, чтобы сделать это раньше или где-то увидеть. Итак, я делаю горизонтальное меню. У меня есть блок div размером 980x36px. Имеет фоновое изображение:

enter image description here

Внутри у меня есть ссылки <a href="/">text</a>), которые я сделал блочными элементами (display: block;) и плавал влево. Так что теперь это будет выглядеть примерно так:

enter image description here

Теперь я хочу, чтобы все активные ссылки и все ссылки, на которые указывает мышь, имели другой фон, например:

enter image description here

Проблема здесь в том, что мое фоновое изображение (при наведении) снова имеет размер 980x36 пикселей и отличается в разных положениях по горизонтали, как и первый фон, синий слева и красный справа:

enter image description here

Итак, теперь, когда я наведите курсор на ссылку, я должен установить положение фона некоторого отрицательного горизонтального значения, например, для третьей ссылки я должен установить что-то вроде background-position: -233px 0px; так что цвета двух фонов подойдут.

Мой вопрос: как это может быть выполнено автоматически? Вот сложная часть: я не знаю ширину всех ссылок, так как они текстовые и должны поддерживать многоязычность (поэтому они, очевидно, не могут быть предварительно созданными изображениями). Я не хочу использовать PNG (я мог бы легко сделать полупрозрачное «стекло», которое бы накладывалось на первый фон и создавало тот же эффект) - из-за… угадайте кто, да IE6. И, наконец, я хочу, чтобы это было сделано с помощью красивой, понятной и широко поддерживаемой техники, поэтому о JavaScript не может быть и речи (я знаю, что это легко, я могу это сделать, я просто не хочу его использовать).

В этой ситуации хорошо знаком метод background-attachment: fixed;. В этом случае было бы здорово, если бы я мог зафиксировать положение фона каждой ссылки на положение контейнера div. Это было бы замечательно! Как раз то, что мне нужно! Каждая ссылка будет на своем месте, но фон будет отображаться так, как если бы он был в контейнере div! Ну, вот в чем проблема, если кто-то знает хорошее решение. Если нет, я должен рассмотреть меньшую боль, которая, по моему мнению, в настоящее время, может быть, заключается в том, чтобы попробовать способ PNG с каким-то исправлением IE?

Ответы [ 2 ]

1 голос
/ 16 мая 2011

Вы должны просто использовать .png, как вы описали в своем вопросе.

Чтобы исправить IE6, вы должны использовать одно из многих доступных .png исправлений на основе JavaScript, таких как:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

Просто не стоит калечить себя, потворствуя ничтожному проценту пользователей, использующих IE6 и , у которых отключен JavaScript.

(да, я понимаю, что вопрос старый, и вы, вероятно, уже создали свое меню)

0 голосов
/ 28 апреля 2011

Самое быстрое решение, которое приходит мне в голову, - это использовать jQuery для правильного позиционирования фона (вы можете проверить положение каждого элемента и просто изменить его положение фона CSS).

...