javascript - 如何通过 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 就绪 block 中定义函数。
2. 将您的相关变量放在 jQuery block 之外，以便它们是全局的并且可以在函数中使用。

---

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>