Question

我有这个随机显示背景图片的代码。我调整图像大小并降低字节以降低加载速度。但是，我希望无论屏幕大小如何，都要调整图像大小。

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

我的问题是“我需要什么才能让图像延伸”

Answer 1

您可以使用CSS3 background-size属性。点击此链接。

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

Answer 2

实现这种效果的最佳方法是使用一个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;

Answer 3

您是否尝试过为图像提供css类并将类的高度和宽度属性设置为100％？

在html上将图像拉伸到全屏

3 个答案: