如何通过javascript更改背景重复和背景大小

Question

我目前有这个，它正在为我工​​作：

<script type='text/javascript'>
            $(function () {
                var body = $('body');
                var backgrounds = [
                  'url(http://localhost:12448/css/images/back1.jpg) no-repeat',
                  'url(http://localhost:12448/css/images/back2.jpg) no-repeat'];
                var current = 0;

                function nextBackground() {
                    body.css(
                        'background',
                    backgrounds[current = ++current % backgrounds.length]);

                    setTimeout(nextBackground, 5000);
                }
                setTimeout(nextBackground, 5000);
                body.css('background', backgrounds[0]);               
            });
</script>

我还需要在JavaScript中实现这部分CSS代码，以便我可以动态更改背景和更改时的相同CSS设置：

body
    {
        background-image:           url('images/overlay.png'),      url('images/bg.jpg');
        background-repeat:          repeat,                         no-repeat;
        background-size:            auto,                           100% 100%;
    }

谁能帮我这个？

Answer 1

解：

这里的主要问题是，你设置的background属性，这将覆盖所有的-size ， -repeat和-image属性。 而是仅更改background-image属性。

这将需要更改您的网址，因为您在网址末尾附加了no-repeat的内容。

---

一些语法上的良好做法：

1. 不要在jQuery ready块中定义function 。
2. 将您的相关变量放在jQuery块之外，以便它们是全局的并且可以在函数中使用。

---

 var body = $('body'); var backgrounds = [ 'url(http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png)', 'url(http://www.logospike.com/wp-content/uploads/2014/11/Google_logo-8.jpg)' ]; var current = 0; $(function() { setTimeout(nextBackground, 5000); body.css('background-image', backgrounds[0]); }); function nextBackground() { body.css( 'background-image', backgrounds[current = ++current % backgrounds.length]); setTimeout(nextBackground, 5000); } 

 html{ margin: 0; height: 100%; } body { background-image: url('images/overlay.png'), url('images/bg.jpg'); background-repeat: repeat, no-repeat; background-size: 100% 100%; height: 100%; margin: 0; } 

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