Question

我正在尝试建立一个带有背景图片的网站，我希望它始终填满整个屏幕。

当浏览器窗口很短且很宽时，我希望图像能够展开，以便它的顶部长度填满整个屏幕，其余部分不可见。

当浏览器窗口高而薄时，我希望图像能够展开，以便它的左侧部分以高度方式填满整个屏幕，而其余部分则不可见。

使用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;
}

如何解决此问题？

Answer 1

您是否只对使用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;
}

这些选项应根据高度和宽度填充浏览器窗口。

Answer 2

body { background: url("...") no-repeat center center fixed; background-size: cover; }

CSS3 background-size：封面不会使图像垂直覆盖

2 个答案: