使用100%宽度和高度的旋转图像作为背景 - rotating images used as backgrounds with 100% width and height

rotating images used as backgrounds with 100% width and height

如果浏览器窗口被扩展/收缩，我该如何使旋转背景图像扩展/收缩?

有人知道这样做的脚本吗?或者是否有一种仅使用CSS的方法?

有一个名为supersize: http://buildinternet.com/project/supersized/的jQuery插件，该插件为您处理所有跨浏览器兼容性，如果您想要，可以在您选择的时间间隔内交换图像。

或者，HTML5的方式做到这一点(只支持在某些浏览器，如Chrome): http://jsfiddle.net/jfriend00/vzYrf/

html {
        background: url(http://photos.smugmug.com/photos/344291068_HdnTo-XL.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

或者有两种方法可以自己做:完美的整页背景图像。

很简单:)

一些css:

<>之前& lt;风格类型= " text/css ">HTML{高度:100%;溢出:隐藏;}Body {background-color: transparent;保证金:0 px;填充:0 px;高度:100%;Border-top: 1px transparent solid;margin-top: 1 px;z - index: 0;位置:相对;}Img #background{高度:100%;宽度:100%;z - index: 1;位置:绝对的;颜色:黑色;}& lt;/风格>之前

你可以使用这些值…

和正文内容:

<>之前body bgcolor="#000300" style="margin:0px;宽度:100%"> My background

& lt;/身体>之前

这是一个背景，剩下的你可以用javascript…

<>之前& lt;脚本type = " text/javascript ">函数changeBackground () {Var背景= ['back1.jpg'， 'back2.jpg'， 'back3.jpg'];var inRandom = Math.floor(Math.random() * background .length);. getelementbyid("背景")。src =背景[inRandom];setTimeout ("changeBackground()"， 10000);}setTimeout ("changeBackground()"， 10000);& lt;/脚本>之前

我没有测试脚本，但这是基本的想法…