Question

我尝试在我的网站中使用大背景图片，但是当我将其插入页面时，它会从顶部和底部裁剪，是否有人可以帮助我？我也使用twitter bootstrap。

<div id="page1" class="row">
    <div class="col-md-12" id="bg">

    </div>
</div>

    body {
    width: 100%;
    min-height: 100%;
}

    #page1, #page2, #page3, #page4, #page5, #page6, #page7, #page8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-right: 1px solid black;
}

#page1 {
    background: url('Images/Background/1.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 1000px;
}

Answer 1

您是否希望不裁剪背景图像？

然后使用background-size: contain;代替background-size: cover;。

使用background-size: 100% 100%;您的图片将被用完（如果整页有背景很重要）。

当IE8及更老版本对您很重要时，您必须使用polyfill。有关详细信息：http://caniuse.com/#search=background-size

请注意，在小屏幕上，您的图片将会很大，并且需要花费大量时间来加载和调整大小。您可以使用CSS3媒体查询（http://caniuse.com/#search=media%20queries）来防止此问题。

Answer 2

根据我看到的信息，如果您希望它无限缩放到页面大小，您可以使用css3。改变这个：

background-size: cover;

为...

background-size: 100% 100%;

或者，你可以position: absolute;一个比你的网页低z-index的div。例如......

http://jsfiddle.net/V29P4/

CSS背景图像裁剪

2 个答案: