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 pseudoclass。

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

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