Jumbotron背景图像不留在Jumbotron

Question

我有一个带有背景图像和文字的超大屏幕。我需要背景图像具有低不透明度（以便顶部的文本是可读的），所以我在＆＃34;＆＃34;之后设置背景图像。伪元素，正如该主题的几篇文章所建议的那样。

问题是背景图像不在jumbotron div的范围内（实际图像比jumbotron div更高/更宽，我希望浏览器只调整它以保持在jumbotron内div - 相反，图像溢出到下面的div中。）

这是我的CSS：

.jumbotron{
  background:transparent;
  padding-bottom: 0px;
  margin-bottom:15px;
}

.jumbotron:after{
   background-image: url(/assets/home/jumbotron_background-14b85e94838f7e237a5318b85a67a43e1ff02276069f6e48148a58eb90767f48.jpg);
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

我已经尝试了两个＆＃34;封面＆＃34;和＆＃34; 100％100％＆＃34;对于背景大小，在这两种情况下，图像仍会溢出到下方的div中。

相关的HTML：

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="text-center">Headline Here</h1>
        <h3 class="text-center">Secondary Headline/ Value Prop</h3>
        <p class="text-center"> Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.</p>
      </div>
    </div>
  </div>
</div>

<div class="spacer-row"></div>
<div class="col-xs-12 text-center">
  <%= link_to 'Get Started!', signup_or_dashboard, class: 'btn btn-xl btn-primary' %>
</div>
  </div>
</div>

Answer 1

您的代码无效，因为您为background-image提供了错误的值。

更正语法 background-image: url('path to image');

它有效。

Answer 2

您缺少两个结束divs，一个用于jumbotron，一个用于容器。这可能是测试中心被jumbotron

占用的原因

position:absolute是否必要？ IMO，:after不需要

Answer 3

你的CSS

.jumbotron{  
  padding: 0;
}
.jumbotron img {
  opacity: 0.3;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.jumbotron .container {
  padding: 15px;
}

您修改的HTML

<div class="jumbotron">
  <img src="home/jumbotron_background.jpg" />
  <div class="container">
    <div class="row">
       <div class="col-lg-12">
         <h1 class="text-center">Headline Here</h1>
         <h3 class="text-center">Secondary Headline/ Value Prop</h3>
         <p class="text-center"> Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta
  felis euismod semper.
         </p>
       </div>
     </div>

    <div class="spacer-row"></div>
    <div class="col-xs-12 text-center">
  <%= link_to 'Get Started!', signup_or_dashboard, class: 'btn btn-xl btn-primary' %>
</div>

Answer 4

经过多次试验和错误后，我通过向jumbotron添加max-height属性得到了一个有效的解决方案：在伪元素之后（如果你将背景图像放在jumbotron内的一个单独的div上，同样的解决方案也可以，而不是使用：after）。所以：

.jumbotron:after{
  background-image: url('home/jumbotron_background.jpg');
  content: "";
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center center;
  max-height: 540px;
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;

}