所以我有一个css下拉菜单，它使用jQuery来更改该身体的背景图像。它"有效"，但是每当我将鼠标悬停（向左或向右）分配了适当的 css 更改的 id 时，我都会在页面底部看到一小块剩余的图像。我的第一个想法是这是一个填充、边距或背景颜色问题。然后它与身体的z指数有关。但是修改任何一个都没有结果。这是怎么回事？
下面是一个包含测试图像的演示：http://jsfiddle.net/dqisv/ty6f1xss/
这是截图： http://g.recordit.co/S4XJw3UrzC.gif。
这是我的 HTML：
<body>
<header>
<h1>Test</h1>
<nav>
<ul class="menu">
<li><a href="#">Selected Work</a>
<ul class="submenu">
<li><a id="image-one" href="#">Aaaaa</a></li>
<li><a id="image-two" href="#">Bbbbb</a></li>
<li><a id="image-three" href="#">Ccccc</a></li>
</ul>
</li>
</ul>
</nav>
<section>
<ul class="social">
<li><a href="#" target="_blank"><span class="fa fa-twitter fa-2x"></span></a></li>
<li><a href="#" target="_blank"><span class="fa fa-github fa-2x"></span></a></li>
<li><a href="#" target="_blank"><span class="fa fa-envelope-o fa-2x"></span></a></li>
</ul>
</section>
</header>
<!-- Content here! -->
</body>
这是我的 CSS：
body{
font-family: Quicksand, Helvetica, sans-serif;
font-size: 100%;
margin: 10px;
left: 0;
top: 0;
display: block;
}
这是我的jQuery：
jQuery(function(){
var $body = $('body');
$('#image-one').hover(function(){
$body.css('background-image', 'url(https://upload.wikimedia.org/wikipedia/commons/9/96/SmogNY.jpg)')
}, function() {
$body.css('background-image', '')
})
$('#image-two').hover(function(){
$body.css('background-image', 'url(http://static.dezeen.com/uploads/2013/10/Smog-by-Daan-Roosegaarde_dezeen_04.jpg)')
}, function() {
$body.css('background-image', '')
})
$('#image-three').hover(function(){
$body.css('background-image', 'url(http://img.rt.com/files/news/22/ea/00/00/27.si.jpg)')
}, function() {
$body.css('background-image', '')
})
})
我不认为图像显示上一项，只是背景图像重复，因为它不够大，无法填充该区域，并且您没有任何 css 设置为背景重复。
如果设置以下内容：
body {
background-size:cover;
background-repeat:no-repeat;
}
代码将停止它重复，并使用背景覆盖来拉伸背景以覆盖整个身体。如果您不希望背景大小拉伸并以原始大小显示图像而不重复，则可以将其删除。
请参阅 http://www.w3schools.com/cssref/css3_pr_background-size.asp