Как я могу создать наведенное изображение, которое увеличивается с длиной текста в меню?

Question

У меня есть меню из 5 пунктов различной длины текста - дома, о нас, свяжитесь с нами и т. Д. В макете в фотошопе я создал фоновое изображение для состояния наведения, но если оно длиннее текста, оно обрезается и не работает в IE. Размер изображения 105 х 28. Вот ссылка на пример . Вы увидите, что при наведении курсора фоновое изображение обрезается. Как я могу это исправить? Спасибо

Answer 1

Вот чистое решение CSS ...

http://jsfiddle.net/wdm954/tAaCF/1/

В основном используются CSS3 border-radius и box-shadow для замены потребности в изображении.Это будет немного менее стильно в старых браузерах.Для простого стиля, подобного этому, это не должно быть решающим фактором, если те, кто уже страдает от недостатка CSS3 в Интернете, не видят довольно закругленных углов.В старых браузерах при наведении курсора будет отображаться синий фон.

Answer 2

Кнопки недостаточно широки для фонового изображения.

Дайте каждому тегу li стиль width: 105px; height: 28px; или создайте CSS-класс с этим стилем и примените этот класс к каждому.

Answer 3

Вы можете попробовать использовать прямоугольное фоновое изображение и использовать атрибут CSS border-radius, чтобы скруглить углы.

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

Третий подход - снова использовать прямоугольное фоновое изображение, а затем создавать «маски», которые являются изображениями угловых вырезов (которые одного цветав качестве фона), которые накладываются на основное фоновое изображение, чтобы углы выглядели закругленными.Я не видел такого подхода с тех пор, как стали широко поддерживаться атрибуты border-radius.

Answer 4

добавить правило CSS к #main-nav li a{ min-width: 105px;}

Я бы порекомендовал иметь фиксированный размер, например, 105px .. и затем text-align: center для каждого из пунктов меню, чтобы все они выстроились в ряд хорошо ... но это зависит от вас