Question

我有一个大的背景图像，它固定在文本显示在它上面，但是图像的底部被剪掉了。我希望图像完全显示而不是裁剪掉。

 #content {
            background-image: url(../images/bean.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
            background-attachment: fixed;
            height: 40em;
            margin-top: 0;
            padding: 0;}

Answer 1

将background-size设置为100vw 100vh，即background-size: 100vw 100vh;

#content {
            background-image: url(http://lorempixel.com/1400/1400/sports/3/);
            background-repeat: no-repeat;
            background-size: 100vw 100vh;
            background-attachment: fixed;
            height: 40em;
            margin-top: 0;
            padding: 0;}

结帐本次演示：http://jsbin.com/buqaju/1/

Answer 2

要让背景始终覆盖您可以使用的整个容器：

background-size: cover;

来源：http://css-tricks.com/perfect-full-page-background-image/ 请注意浏览器支持：http://caniuse.com/#search=background-size（提示：否IE8）

另外，我注意到它在具有大量透明度和移动背景的页面上表现不佳，但除此之外我使用它非常多并且效果很好。

Answer 3

增加身高？

height: 100em;

Answer 4

你有

background-size:100%;

使用

background-size: 100% 100%;

Answer 5

.bg_care{
        background-image: url(../img/care-area.jpg);
        background-size: cover;
}

只使用背景大小作为它不会被切断的封面。

Answer 6

您还可以这样修改背景：

  background: url(xyz.jpg) no-repeat **center center** fixed;

根据需要（左，右，底部，顶部）更改 center 值。取决于图像，它可能会有用。

如何让背景图像在底部不被切断？

6 个答案: