Question

所以我有一个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', '')
    })
})

Answer 1

我不认为图片显示的是上一个项目，只是背景图片正在重复，因为它不够大，无法填充该区域，而且您没有任何图片css为背景重复设置。

如果您设置以下内容：

body {
background-size:cover;
background-repeat:no-repeat;
}

代码将阻止它重复并使用背景覆盖来拉伸背景以覆盖整个身体。如果您不希望它拉伸并以原始尺寸显示图像而不重复，则可以删除背景尺寸。

请参阅http://www.w3schools.com/cssref/css3_pr_background-size.asp

改变身体背景以在悬停时显示图像在页面底部留下图像的残余 - 为什么？

1 个答案: