css 如何实现随机背景图片

CSS可以让我们很方便地控制网页元素的外观，包括背景图片。如果我们想让网页的背景图片每次刷新时都是不同的，只需要用CSS实现一下随机背景图片的功能即可。

body {
      background-image: url("picture1.jpg");
 /* 默认背景图片 */}
/* 用JavaScript生成随机数，并将背景图片更换为对应的随机图片 */function setBackgroundImage() {
      var randomNumber = Math.floor(Math.random() * 5) + 1;
     /* 生成1~5的随机数 */  document.body.style.backgroundImage = "url('picture" + randomNumber + ".jpg')";
}
    setInterval(setBackgroundImage, 5000);
     /* 每5秒钟更换一次背景图片 */

上面的代码中，我们首先给body元素设置了一个默认的背景图片picture1.jpg。接着，使用JavaScript生成一个1~5之间的随机数，并将背景图片更换为对应的随机图片。最后，使用setInterval函数让背景图片每5秒钟更换一次。

需要注意的是，如果需要使用JS生成随机数，就必须使用JS来实现随机背景图片的功能，而不能像一些人所说的那样用CSS实现。因为CSS没有随机数生成的功能，所以在CSS中无法实现自动更换随机背景图片的功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！