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

Question

这是带有代码的我的codepen页面的链接。如您所见，Jumbotron 背景图像在底部不断被切断，我似乎无法解决这个问题。

http://cdpn.io/onKzF

Answer 1

只需将高度添加到您的.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>

Answer 2

您的图像比 div 大得多，请尝试设置高度。您可能还想研究滑动门技术。

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

Answer 3

如前所述，在你的 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;
}