Question

如果展开/缩小浏览器窗口，我如何能够展开/收缩的旋转背景图像？

有没有人知道这样做的脚本？或者只有CSS的方式吗？

Answer 1

有一个名为SuperSized的jQuery插件：http://buildinternet.com/project/supersized/，该插件为您处理所有跨浏览器兼容性，并会根据您的选择以您选择的时间间隔交换图像。

或者，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;
}

或者另外两种方法：Perfect Full Page Background Image。

Answer 2

很简单：）

一些css：

<style type="text/css">
   html { height: 100%; overflow:hidden;}
   body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; }
   img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: black; }
</style>

你可以玩这些价值......

和身体内容：

<body bgcolor="#000300" style="margin:0px; width:100%">
 <img id="background" src="background.jpg" alt="My Background" />
</body>

这是1个背景，其余的你可以使用javascript ...

<script type="text/javascript">
   function changeBackground(){
      var backgrounds = ['back1.jpg', 'back2.jpg', 'back3.jpg'];
      var inRandom = Math.floor(Math.random() * backgrounds.length);
      document.getElementById('background').src = backgrounds[inRandom];
      setTimeout ( "changeBackground()", 10000 );
   }
   setTimeout ( "changeBackground()", 10000 );
</script>

我没有测试脚本，但这基本上就是这个想法......

旋转图像用作100％宽度和高度的背景

2 个答案: