背景图像在底部不断被切断

Question

以下是使用代码链接到我的codepen页面。正如您所看到的那样，Jumbotron背景图像在底部不断被切断，我似乎无法解决这个问题。

http://cdpn.io/onKzF

Answer 1

你的图像比div大得多，尝试设置一个高度。您也可以查看滑动门技术。

http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

Answer 2

如前所述，请在CSS上尝试：

.jumbotron {
    background: url("http://i1244.photobucket.com/albums/gg572/fitnessbeast1/Jumbotron/Tron.png") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
    margin: auto;
    padding: 0 15px;
    width: 90%;
    height: 437px;
}

Answer 3

只需为 .jumbotron 类添加高度

.jumbotron{height:371px}

或将内容添加到 jumbotron 容器

<div class="jumbotron">
      <h2>Jumbotron</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of 
    </div>