javascript - 整页大小的背景图片-6ren

javascript - 整页大小的背景图片

转载作者：太空宇宙更新时间：2023-11-04 11:51:59

我的 html 页面有一个背景图片。我通过 css 样式设置它:-

html{ 
    margin-top:10px;
    background: url(xxxxx.jpg) no-repeat center center fixed; 
    background-size: cover;
}

我想知道如何从 Javascript 端动态更改它。

我试过类似的东西:

document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";

但这不会改变图像。

在不使用 jQuery 的情况下，我如何访问 html 元素并更改其 bkImage，比如每 5 秒更改一次以使其像幻灯片一样。 (我会将我的图像 url 存储在一个数组中)。

最佳答案

背景图像并没有真正绑定(bind)到 html 标签，而是 body 标签。尝试:

body
{ 
  background-image: url(xxxxx.jpg); 
}

和脚本:

document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";

如果这按预期工作(您看到的是 zzzzz.jpg，而不是 xxxxx.jpg)，那么您就可以修复其余的 CSS 代码了。

编辑测试了代码并修复了一个错误。您必须分配 backgroundImage = "url('zzzzz.jpg')"，而不仅仅是我之前写的文件名。

举个例子，这很完美，你只需要两张图片(red.jpg 和 blue.jpg):

<html>
  <head>
    <style>
      body
      { 
        background-image: url('red.jpg');
      }
    </style>
  </head>
  <body>
    <script>
      document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')";
    </script>
  </body>
</html>

编辑 2:

CSS 的其余部分不得更改，因此您仍将拥有:

body
{
  margin-top: 10px;
  background: url('xxxxx.jpg') no-repeat center center fixed;
  background-size: cover;
}

background 属性是一个复合属性:

  background: url('xxxxx.jpg') no-repeat center center fixed;
              ^                ^         ^      ^
              URL              R         H      V

  URL: the image url
  R: repetition
  H: horizontal alignment
  V: vertical alignment

与

background-image: url('xxxxx.jpg')

您只需更改上述复合的 URL 部分，其余部分保持原样。如果图像太小，它可能会被拉伸(stretch)以覆盖整个屏幕。因此，要获得良好的幻灯片放映效果，请确保所有图像的大小都相同。

关于javascript - 整页大小的背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30561815/

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 整页大小的背景图片