全页尺寸背景图片
[英]Full page size background image
问题描述
我的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秒说一次，使其变得像幻灯片一样。 （我将图像网址存储在数组中）。
2 个解决方案
解决方案1
1 已采纳 2015-05-31 19:39:21
背景图片并不是真正与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部分，其余部分保持原样。 如果图像太小，则可能会拉伸以覆盖整个屏幕。 因此，为获得良好的幻灯片播放效果，请确保所有图像的尺寸均相同。
解决方案2
0 2015-05-31 19:44:52
要访问html元素，可以使用document.documentElement ：
document.documentElement.style.backgroundImage = "url('yyy.jpg')";
要每X秒更改一次，可以使用setInterval()并将图像放置在数组中。
多个整页背景图片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.