Question

我在设置背景图像时遇到了麻烦，我正在使用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样式？

非常感谢！

Answer 1

您可能只是为了更新网址而践踏所有background个属性。像background和border这样的margin是用于组合各种特定规则的简写规则，根本不需要使用，在这种情况下应该避免使用，因为您只需要更新一个更具体的规则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)");

Answer 2

<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>

jquery背景图像样式

2 个答案: