用窗口移动背景图片

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

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来做到这一点？

menu at 1200 px menu at 100px

来源

2013-11-21 MrBlonde

你能提供的CSS也？你可以添加到一个jsFiddle或什么？ – Ming

这不漂亮。我包括了我正在使用的媒体屏幕。 http://jsfiddle.net/MrBlonde/Uh5Uh/ – MrBlonde

我有两个24显示器，我只能看到一个区别，当我遇到我的第二个中途扩大，并从那里收缩，因此jfiddle可能不是我们的最佳测试enviornment。 – MrBlonde

试试这个CSS：

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

来源

2013-11-21 01:01:38 busterroni

但是，当我调整浏览器大小时，它们会继续滑动吗？本质上，我想保持这个空间，我调整大小。类似于http://kershaw.kaiusaltd.com/上的顶层菜单设置 – MrBlonde

在你的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; 
}

基本上，去除背景尺寸（因此图像不伸展）不与MIN-和max-宽度淤泥，交换关于这三个项目left属性为right属性，设定的距离，并且将没事的。

你只需要设置的身体，这样的项目现在不重叠的最小宽度（因为他们仍然绝对位置）。另外，用浮漂，而不是绝对定位的元素实现它。

来源

2013-11-21 01:47:16 Ming

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

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

来源

2013-11-21 01:59:45 Jesse

用窗口移动背景图片

回答

相关问题