我正在尝试建立一个带有背景图像的网站,我希望它总是填满整个屏幕.
当浏览器窗口短而宽时,我希望图像扩展,以便它的顶部填充整个屏幕的长度,其余部分不可见.
当浏览器窗口又高又薄时,我希望图像能够展开,这样它的左侧部分就会在高度上填满整个屏幕,而其余部分则不可见.
使用CSS3 background-size：cover属性使前者像魅力一样,后者则不然.相反,背景图像缩小,以便在可用的窄区域内完全可见并缩放到宽度,然后在其下面的页面的其余部分只是背景颜色.
body {
background-color: #BF6F30;
color: black;
font-family: Georgia,"Times New Roman",sans-serif;
background: url(' ... ');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
我该如何解决这个问题？
解决方法
您是否只对使用CSS背景图片感兴趣？这可以通过加载图像并用CSS约束它来完成.
这两个例子都有用吗？
HTML
<body id="page-body"> <img class="bg" src="images/bodyBackground1.jpg"> <div class="wrapper"> </div> </body>
CSS
html {
background: url(images/bodyBackground1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background:#fff;
margin: 0;
padding: 0;
overflow:hidden;
}
html,body {
height: 100%;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
还是这一个？这个将数据库中的图像加载到数组中并随机加载它们,但您可以从中收集一些信息：
<?PHP $bg_images = array( 0 => 'comp1.png',1 => 'comp2.png',2 => 'comp3.png',.... ); $image = $bg_images[ rand(0,(count($bg_images)-1)) ]; $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>"; ?>
HTML
... <body> <?PHP echo $showBG; ?> <div id="wrapper"> ...
CSS
html,body {
margin:0;
height:100%;
}
img.source-image {
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
min-width:1024px;
}
这些选项应根据高度和宽度填充浏览器窗口.
