以 100% 的宽度和高度旋转用作背景的图像
[英]rotating images used as backgrounds with 100% width and height
问题描述
How can I have rotating background images that expand/contract if the browser window is expanded/contracted?
如果浏览器 window 展开/收缩，我如何才能拥有展开/收缩的旋转背景图像？
Does anyone know a script that does this?有谁知道这样做的脚本？ Or would there be a way with just CSS?或者只有 CSS 有办法吗？
2 个解决方案
解决方案1
1 2011-07-17 05:55:00
There's a jQuery plugin called SuperSized: http://buildinternet.com/project/supersized/ and the plugin handles all cross browser compatibility for you and will swap images at the time interval of your choosing if you want.有一个名为 SuperSized 的 jQuery 插件： http://buildinternet.com/project/supersized/该插件为您处理所有跨浏览器兼容性，并且如果您愿意，将在您选择的时间间隔交换图像。
Or, the HTML5 way to do this (only supported in some browsers like Chrome): http://jsfiddle.net/jfriend00/vzYrf/或者，执行此操作的 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;
}
Or two more ways to do it yourself: Perfect Full Page Background Image .或者另外两种自己做的方法：完美的整页背景图像。
解决方案2
0 2011-07-17 06:20:19
it's simple:)这很简单：）
some css:一些 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>
you can play with these values...您可以使用这些值...
and body content:和正文内容：
<body bgcolor="#000300" style="margin:0px; width:100%"> <img id="background" src="background.jpg" alt="My Background" /> </body>
this is for 1 background, the rest you can do with javascript...这是针对 1 个背景，rest 您可以使用 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>
I didn't test the script, but this is basically the idea...我没有测试脚本，但这基本上是这个想法......
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.