css - 如何设置顶部有图像且文本居中的水平菜单的样式？

Question

考虑到下图，表示此菜单交互的 3 种状态:

并且知道:

1) 我们不能为所有水平菜单使用一张图片，每个元素(因此，每个 ul li a)都应该有自己的图片；

2)背景图片定位将受到青睐，因为它在跨浏览器问题上会更好；

3)这些按钮上的文字(应该是)文字而不是图片；

实现此目标的最佳方法是什么？我只需要在这里开始。

谢谢。

更新:

这是一个没有交换图像的测试: http://jsfiddle.net/Cq5JY/

Answer 1

很简单，我认为您已经自己拼出了您的解决方案。

导航中的每个元素都需要 1 张图像，其中包含翻转和事件状态的三种状态。然后，您将使用您提到的 CSS 移动背景图像，具体取决于您布置图像的方式。

让 css 有点棘手的事情(嗯，你会写很多)是按钮上的文本定位，如果文本从很多不同的 y 坐标开始，那么显然你会写每一个在 CSS 中。

我会使用类似于下面的代码(未经测试)设置导航，基于每个按钮的单独图像，其中包含按钮的常规状态，在翻转下方和下方，激活状态按钮。

/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{

    display:block;
    width:150px;
    height:100px;
    text-align:center;
    background-position:0 0;
}

ul li{

    float:left;
}

/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }

/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }

/* define each button (background image and text position) */
ul li a.dashboard
{
    background-image:url(images/dashboard.png); /* define image url */
    padding-top:40px; /* position the text using a combination of padding / height) */
    height: 60px;

}
ul li a.products
{
    background-image:url(images/products.png); /* define image url */
    padding-top:30px; /* position the text using a combination of padding / height) */
    height: 70px;

}
...

然后我会非常简单地得到 html:

<ul>
    <li><a href="dashboard.html" class="dashboard active">Dashboard</a></li>
    <li><a href="products.html" class="products">Products &amp; Services</a></li>
    ...
</ul>

如果您有任何问题，请告诉我，我还没有实际测试代码，但这是我对大多数基于 html/css 的导航的一般方法，无论是垂直还是水平(尽管我会为所有翻转使用 1 个大图像所有按钮的状态)。