我有这段代码,它随机显示背景图像。我放大了图像的大小并降低了字节数以降低加载速度。但是,我希望图像能够根据屏幕尺寸调整大小。
<script type="text/javascript">
var randnum = Math.random();
var inum = 3;
var rand1 = Math.round(randnum * (inum - 1)) + 1;
images = new Array();
images[1] = "bgImages/Blue_Venetian_Glass.jpg";
images[2] = "bgImages/Etched Glass.jpg";
images[3] = "bgImages/glass.jpg";
images[4] = "bgImages/Raindrops_on_Glass.jpg";
var image = images[rand1];
document.body.style.background = 'url("' + image + '") no-repeat center center fixed';
</script>
我的问题是“我需要什么来使图像拉伸(stretch)”
最佳答案
实现该效果的最佳方法是使用 div,其中图像绝对定位,您可以设置样式。
在 </body>
之前添加 HTML :
<div align="center"><img src="images/BG.jpg" id="bg"></div>
CSS:
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
Javascript:
var randnum = Math.random();
var inum = 3;
var rand1 = Math.round(randnum * (inum - 1)) + 1;
images = new Array();
images[1] = "bgImages/Blue_Venetian_Glass.jpg";
images[2] = "bgImages/Etched Glass.jpg";
images[3] = "bgImages/glass.jpg";
images[4] = "bgImages/Raindrops_on_Glass.jpg";
var image = images[rand1];
document.getElementById('bg').src = image;
关于javascript - 在html上将图像拉伸(stretch)到全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12586594/