Question

我正在尝试创建一个全屏可更改的背景图像。我花了很长时间来完善它以便在其他PC上工作。它在我的屏幕上完美运行，但在其他显示器上它会改变。

现在的问题是，如果浏览器没有最大化，图像就会到处都是。一旦最大化，它就能正常工作。

背景图像每5秒更改一次，因此它不像设置背景图像那么简单。这是我的代码：

<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
    //change the image
    if(!imageID)
    {
        document.getElementById("myimage").src="Minecraft.jpg";
        imageID++;
    }
    else if(imageID==1)
    {
        document.getElementById("myimage").src="Minecraft1.jpg";
        imageID++;
    }
    else if(imageID==2)
    {
        document.getElementById("myimage").src="Minecraft2.jpg";
        imageID++;
    }
    else if(imageID==3)
    {
        document.getElementById("myimage").src="Minecraft4.jpg";
        imageID++;
    }
    else if(imageID==4)
    {
        document.getElementById("myimage").src="Minecraft5.jpg";
        imageID++;
    }
    else if(imageID==5)
    {
        document.getElementById("myimage").src="Minecraft6.jpg";
        imageID++;
    }
    else if(imageID==6)
    {
        document.getElementById("myimage").src="Minecraft7.jpg";
        imageID=0;
    }
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>

<style>
#myimage {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

<body>
<body style='background:black; '
  onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img  id='myimage' src='Minecraft.jpg'/>
</div>
</body>

---------- --------------编辑我使用了你的代码（希望正确），但现在图像根本没有加载。

<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
    //change the image
    if(!imageID)
    {
        document.getElementByTagName("body").className="pic1";
        imageID++;
    }
    else if(imageID==1)
    {
        document.getElementByTagName("body").className="pic2";
        imageID++;
    }
    else if(imageID==2)
    {
       document.getElementByTagName("body").className="pic3";
        imageID++;
    }
    else if(imageID==3)
    {
        document.getElementByTagName("body").className="pic4";
        imageID++;
    }
    else if(imageID==4)
    {
        document.getElementByTagName("body").className="pic5";
        imageID++;
    }
    else if(imageID==5)
    {
        document.getElementByTagName("body").className="pic6";
        imageID++;
    }
    else if(imageID==6)
    {
        document.getElementByTagName("body").className="pic7";
        imageID=0;
    }
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
</head>

<body>
<body>
<style>
.pic1 { background-image: 'Minecraft.jpg'; }
.pic2 { background-image: 'Minecraft1.jpg'; }
.pic3 { background-image: 'Minecraft2.jpg'; }
.pic4 { background-image: 'Minecraft5.jpg'; }
.pic5 { background-image: 'Minecraft6.jpg'; }
.pic6 { background-image: 'Minecraft7.jpg'; }
</style>

<body style='background:black; '
  onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img  id='myimage' src='Minecrft.jpg'/>
</div>
</body>

我做错了什么？

Answer 1

为背景图像使用100％x 100％绝对定位的div可能是导致问题的原因。

切换到＆lt;上的CSS类身体＆gt;

.pic1 { background-image: '../path/to/image1'; }
.pic2 { background-image: '../path/to/image1'; }
etc

然后，您不会更改图像标记的src，而是更改＆lt;的类。身体＆gt;。这将允许您删除该div的绝对定位并“正常”布置网站。

Answer 2

您可以这样做：

var imageClass = 'pic';
if(imageID) {
    imageClass += imageID;
}
document.body.className = imageClass;
imageID++;

和CSS：

.pic {background-image: url(Minecraft.jpg);}
.pic1 {background-image: url(Minecraft1.jpg);}

等

要调整背景大小，您可以选择最适合您网站的CSS alternative，例如：

body {
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: cover cover;
}

A live demo at jsFiddle

非最大化的浏览器混淆了背景图像

2 个答案: