我正在尝试建立一个带有背景图像的网站,我希望它总是填满整个屏幕.
当浏览器窗口短而宽时,我希望图像扩展,以便它的顶部填充整个屏幕的长度,其余部分不可见.
当浏览器窗口又高又薄时,我希望图像能够展开,这样它的左侧部分就会在高度上填满整个屏幕,而其余部分则不可见.
使用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;
}
我该如何解决这个问题？
Car*_*tes 10
您是否只对使用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加载功能
<?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;
}
这些选项应根据高度和宽度填充浏览器窗口.