0

我在使用 jQuery 循环来源的背景图像样式时遇到问题。图像作为背景插入到 css 中，并被拉伸以覆盖整个窗口。这是我的CSS：

html {
    background: url(images/image_1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

在添加 jQuery 交换器之前，图像看起来符合预期。但是，当我添加交换器时，css 样式会失败。封面效果似乎下降了，我只剩下一个固定大小的图像。不过，交换效果很好。我认为 jQuery css 会添加到 css 中，但它几乎就像它覆盖了 html 元素的所有属性，只是给我留下了背景源但没有覆盖。这是我的 html 和 javascript 的样子：

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script language="javascript">
<!--
    var ctr = 0;

    $(document).ready( function () {
        nextBg();
    });

    function nextBg()
    {
        ++ctr;

        if( ctr <= 3 )
        {
            $("html").css( "background", "url(images/repurpose2/image_" + ctr + ".jpg) no-repeat center center fixed" );
            if( ctr == 3 )
                ctr = 0;
        }
    }
//-->
</script>

<link rel="stylesheet" type="text/css" href=style.css>

</head>

<body>

    <div class="image-swapper">
        <a href="#" onclick="nextBg();" />Next</a>
    </div>

</body>

</html>

我正在使用我在这里找到的背景图像交换方法： Loop thru 100 background-images onClick

谁能告诉我为什么我无法使用 style.css 文件设置我的 html 样式？

非常感谢！

4

2 回答 2

1

您可能只是为了更新 url 而践踏所有background属性。backgroundlike borderandmargin是组合各种特定规则的简写规则，根本不需要使用，在这种情况下应该避免使用它，因为您只想更新更具体的规则之一，background-image.

只需换掉：

 $("html").css( "background", "url(images/repurpose2/image_" + ctr + ".jpg) no-repeat center center fixed" );

和

 $("html").css( "background-image", "url(images/repurpose2/image_" + ctr + ".jpg)");
于 2013-09-15T20:02:39.237 回答
0 
<script language="javascript">
    var ctr = 0;

    $(document).ready( function () {
        nextBg();
    });

    function nextBg()
    {   
        ++ctr;
        if( ctr <= 3 )
        {
            imageUrl = "images/repurpose2/image_" + ctr + ".jpg";
            $('html').css('background-image', 'url("' + imageUrl + '")');
            $('html').css('background-repeat', 'no-repeat');
            $('html').css('background-position', 'center');
            $('html').css('background-attachment', 'fixed');
            if( ctr == 3 )
            {
                ctr = 0;
            }

        }
    }
</script>
于 2013-09-15T19:57:29.323 回答