1

我有这个随机显示背景图像的代码。我调整了图像大小并降低了字节以降低加载速度。但是，我希望图像可以根据屏幕尺寸调整大小。

<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>

我的问题是“我需要什么来拉伸图像”

4

3 回答 3

2

您可以使用 CSS3background-size属性。检查此链接。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

于 2012-09-25T15:54:50.690 回答
2

实现该效果的最佳方法是使用一个 div，其中的图像绝对定位它，您可以设置它的样式。

之前要添加的 HTML </body>：

<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;
于 2012-09-25T15:58:11.493 回答
0

您是否尝试过给图像一个 css 类并将该类的高度和宽度属性设置为 100%？

于 2012-09-25T16:03:50.973 回答