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

前端之家收集整理的这篇文章主要介绍了CSS3 background-size:封面不会使图像垂直覆盖前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试建立一个带有背景图像的网站,我希望它总是填满整个屏幕.

当浏览器窗口短而宽时,我希望图像扩展,以便它的顶部填充整个屏幕的长度,其余部分不可见.

当浏览器窗口又高又薄时,我希望图像能够展开,这样它的左侧部分就会在高度上填满整个屏幕,而其余部分则不可见.

使用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加载功能

<?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;
}

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

原文链接:https://www.f2er.com/css/214095.html

猜你在找的CSS相关文章