用窗口移动li /背景图像

Question

如何在调整大小时使用窗口移动背景图像？我正在使用一个精灵，但是如果它太难以这样做，我可以将背景图像更改为单个图像。我的代码如下：

html:
<nav class="topNav">
     <ulstyle="list-style-type:none">
           <li id="daily_sale" style="display:inline"><a href="/DealOfTheDay.asp?deal=" class="deselect"></a></li>
           <li id="my_account" style="display:inline"><a href="/login.asp" class="deselect"></a></li>
           <li id="support" style="display:inline"><a href="/terms.asp" class="deselect"></a></li>
           <li id="shopping_cart" style="display:inline"><a href="/shoppingcart.asp?" class="deselect"></a></li>

</ulstyle="list-style-type:none"></nav>

我还包括2张图片。第一个是大约1200px发生的事情。第二个是1000px的样子。我想要做的是将“帐户，支持，购物车”图像滑过，以便它们之间的空间不会改变。 “销售”形象不应该移动。我需要使用JavaScript吗？或者我可以使用CSS吗？

Answer 1

我认为关键问题是<a>的大小为零。所以你应该在<a>标签中添加一个div。 请参阅我的修正案。顺便说一下，你应该添加ul li{float:left}让李水平站立

http://jsfiddle.net/Uh5Uh/3/

Answer 2

试试这个CSS：

#my_account, #support, #shopping_cart{
    position:fixed;
}

Answer 3

在你的jsFiddle中，当我改变窗口宽度时，我会让整个图像水平拉伸。这与你的间距增加没有多大关系，因为你的物品都是绝对定位的（因此每个物品的左边缘总是彼此远离那个距离）和宽度当您更改页面宽度时，项目本身会变宽。

窗口宽度小于1335px时会停止。

简而言之：您的媒体查询会破坏您的图标。它正在拉伸图像（因为你使用％作为背景大小，它将背景大小调整为项目的宽度，这也是％，所以也变得更宽。）

http://jsfiddle.net/Uh5Uh/2/

#daily_sale a{
    background: url('http://phantomsupply.com/v/vspfiles/templates/223/images/homepage/daily sale button black site.png');
    background-repeat:no-repeat;
}

基本上，删除背景大小（因此图像不会伸展）不会使用最小和最大宽度进行混乱，在{3}上交换left属性right }属性，设置距离，一切都会好的。

你只需要在身体上设置一个最小宽度，这样物品现在就不会相互重叠（因为它们仍然绝对定位。）或者，用浮动而不是绝对定位的元素来实现它。