时间戳

首页 > 解决方案 > Javascript 图像覆盖整个页面

javascript - Javascript 图像覆盖整个页面

问题描述

我有以下代码，它是每 10 秒更改一次背景图像的函数：

$(function() {
var body = $(".home");
var backgrounds = [
    "url(img/Agure.jpg)",
    "url(img/Arsenal1.jpg)",
    "url(img/ManUtd.jpg)",
    "url(img/stadion.jpg)",
];
var current = 0;

function nextBackground() {
    body.css(
        "background",
        backgrounds[current = ++current % backgrounds.length]);
    setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background", backgrounds[0]);

该代码有效，但我希望图像始终覆盖整个页面。有些图像太小而无法覆盖整个页面，因此它们只是彼此相邻堆叠。有什么建议可以更改代码吗？

HTML 和 CSS：

<section class="home">
    <div class="centered">
        <div class="h-100 row align-items-center">
        </div>
    </div>
</section>

.home {
    width: 100%;
    height: 100vh;
    background-position: center top;
    background-size: cover;
}

标签： javascriptjqueryhtmlcss

解决方案

这里的问题是两件事的结合：

  • 您没有使用background-repeat: no-repeat这意味着图像将平铺以覆盖背景（仅当图像小于容器时才可见，这可能会造成混淆）
  • 你background在 JS 中设置，而不是background-image覆盖你额外的 CSS 属性。

这是一个修改后的版本：

$(function() {
  var body = $(".home");
  var backgrounds = [
    "url(https://picsum.photos/200/300)",
    "url(https://picsum.photos/100/300)",
    "url(https://picsum.photos/300/300)",
    "url(https://picsum.photos/250/300)",
  ];
  var current = 0;

  function nextBackground() {
    body.css(
      "background-image",
      backgrounds[current = ++current % backgrounds.length]
    );
    setTimeout(nextBackground, 10000);
  }
  setTimeout(nextBackground, 10000);
  body.css("background-image", backgrounds[0]);
})
.home {
  width: 100%;
  height: 100vh;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home">
  <div class="centered">
    <div class="h-100 row align-items-center">
    </div>
  </div>
</section>

推荐阅读