Наличие двух фонов для активного пункта меню?

Question

Привет У меня есть динамическое меню, в котором элементы ul li меняются по ширине в зависимости от текста, установленного в CMS (Joomla). Они хотят, чтобы элемент меню, при наведении мыши, имел 1. повторное фоновое изображение и 2. изображение, расположенное вверху (http://screencast.com/t/Zjk4YTJmNGQ).

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

Любая помощь будет принята с благодарностью, так как я еще не изучил эту технику: (

Answer 1

Если это меню, соответствующая разметка, вероятно, должна напоминать <li><a href="…">…</a></li> - это два элемента, что достаточно для двух фоновых изображений.

Answer 2

Браузеры Firefox 3 и Webkit поддерживают несколько фонов.

background: url(image1.png), url(image2.png);
background-repeat: repeat-x, no-repeat;
background-position: top right, 90% 5px;

Вы также можете попытаться заставить это работать, используя псевдокласс: after.

.menu li {
    position: absolute;
    background: url(image1.png);
}

.menu li:after {
    content: '<img src="image2.png">';
}

Вы можете найти хороший пример здесь: http://s3.amazonaws.com/nettuts/690_textGradients/index.html