мой вопрос немного сложен, и я не совсем уверен, возможно ли это, но я думаю, у меня есть воспоминания о том, чтобы сделать это раньше или где-то увидеть.
Итак, я делаю горизонтальное меню. У меня есть блок div размером 980x36px. Имеет фоновое изображение:
Внутри у меня есть ссылки <a href="/">text</a>
), которые я сделал блочными элементами (display: block;
) и плавал влево. Так что теперь это будет выглядеть примерно так:
Теперь я хочу, чтобы все активные ссылки и все ссылки, на которые указывает мышь, имели другой фон, например:
Проблема здесь в том, что мое фоновое изображение (при наведении) снова имеет размер 980x36 пикселей и отличается в разных положениях по горизонтали, как и первый фон, синий слева и красный справа:
Итак, теперь, когда я наведите курсор на ссылку, я должен установить положение фона некоторого отрицательного горизонтального значения, например, для третьей ссылки я должен установить что-то вроде background-position: -233px 0px; так что цвета двух фонов подойдут.
Мой вопрос: как это может быть выполнено автоматически? Вот сложная часть: я не знаю ширину всех ссылок, так как они текстовые и должны поддерживать многоязычность (поэтому они, очевидно, не могут быть предварительно созданными изображениями). Я не хочу использовать PNG (я мог бы легко сделать полупрозрачное «стекло», которое бы накладывалось на первый фон и создавало тот же эффект) - из-за… угадайте кто, да IE6. И, наконец, я хочу, чтобы это было сделано с помощью красивой, понятной и широко поддерживаемой техники, поэтому о JavaScript не может быть и речи (я знаю, что это легко, я могу это сделать, я просто не хочу его использовать).
В этой ситуации хорошо знаком метод background-attachment: fixed;
. В этом случае было бы здорово, если бы я мог зафиксировать положение фона каждой ссылки на положение контейнера div. Это было бы замечательно! Как раз то, что мне нужно! Каждая ссылка будет на своем месте, но фон будет отображаться так, как если бы он был в контейнере div! Ну, вот в чем проблема, если кто-то знает хорошее решение. Если нет, я должен рассмотреть меньшую боль, которая, по моему мнению, в настоящее время, может быть, заключается в том, чтобы попробовать способ PNG с каким-то исправлением IE?