CSS sprite 菜单没有显示正确的背景

Question

我是 CSS 精灵菜单的新手，所以请耐心等待（是的，我到处寻找答案）。我正在开发 small/simple 移动网站。我的主菜单都在索引页上。现在我在第一个子页面上。我只想要一个 "Home" 和一个 "Back" 按钮。我的问题是我选择了新的 sprite 背景，但它仍然想使用索引页面中的另一个（特别是 "Home" 按钮）。我究竟做错了什么。我知道这很简单，但我没有想法。这是我的代码：

<style type="text/css">
ul {
 position: relative;
 width: 148px;
 height: 44px;
}
li {
 display: block;
 
}
li.subhome  a {
 background-image: url(css/sub-menu.jpg);
 display: block;
 width: 148px;
 height: 44px;
 background-repeat: no-repeat;
 float: left;
}
li.back  a {
 background-image: url(css/sub-menu.jpg);
 display: block;
 width: 148px;
 height: 44px;
 background-repeat: no-repeat;
 float: right;
}
</style>

<body>
<div class="gridContainer clearfix">
  <div id="header" class="fluid "><img src="m_images/topbanner-logo.png" alt="" width="230" height="77" id="tcdfLogo"/></div>
  <nav class="fluid">
      <ul class="submenu">
      <li><a href="#" class="subhome">Home</a></li>
      <li><a href="#" class="back">Back</a></li>
      
    </ul>
</nav>
  <div id="mainContent" class="fluid ">
    <p><span class="headings">WELCOME TO TCDF MOBILE</span><br>
      We strive to get the best information to you about Tishomingo County and it's advantages. If you would like to get more detailed information, please visit us at our <a href="http://www.tishomingo.org" title="TCDF Full Website">full site</a>.</p>
  </div>
</div>
</div>
</body>

Answer 1

您在 <a> 元素上添加了 class 名称，因此您的目标是 CSS.

中的 <li>

更改 css 选择器或在 <li> 元素上移动 class 名称。

li  a.subhome {
    background-image: url(css/sub-menu.jpg);
    display: block;
    width: 148px;
    height: 44px;
    background-repeat: no-repeat;
    float: left;
}

li  a.back {
    background-image: url(css/sub-menu.jpg);
    display: block;
    width: 148px;
    height: 44px;
    background-repeat: no-repeat;
    float: right;
}

Answer 2

由于您对两个图像使用一个精灵，因此您需要指定应显示图像的哪一部分。这是通过 background-position 属性完成的。

例如background-position: -32px -12px;。您需要尝试使用这些值来找到正确的图像部分，因为这取决于您的 sprite 外观。

See CSS Image Sprites on MDN.

CSS sprite 菜单没有显示正确的背景

CSS sprite menu not show correct background

css

menu

background-image