CSS精灵菜单不显示正确的背景

问题描述：

我是新来的CSS精灵菜单，所以请耐心与我（是的，我到处寻找答案）。我正在研究一个小型/简单的移动网站。我的主菜单都在索引页上。现在我在第一个子页面上。我只想要一个“家”和“后退”按钮。我的问题是我选择了新的精灵背景，但它仍然想使用索引页中的另一个（特别是“Home”按钮）。我究竟做错了什么。我知道这很简单，但我没有想法。这里是我的代码：CSS精灵菜单不显示正确的背景

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

答

您的<a>元素这样你靶向在你的CSS <li>上添加你的类名。

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

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; 
}

谢谢你们两位！嘘，甚至“我”应该知道我有我的选择器在错误的地方。猜猜我看了太久。随着更多bg.pos。调整，现在一切都是固定的，但我相信我会回来。再次感谢！ – Newsong80 2015-03-04 00:59:16

答

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

例如background-position: -32px -12px;。你需要玩弄值来找到正确的图像部分，因为它取决于你的精灵的外观。

See CSS Image Sprites on MDN.

CSS精灵菜单不显示正确的背景

相关推荐