Jumbotron 背景图像不留在 Jumbotron 内

Question

我有一个带有背景图片和文字的 Jumbotron。我需要背景图像具有低不透明度（以便顶部的文本可读），因此我将背景图像设置在“之后”伪元素上，正如有关该主题的一些帖子所建议的那样。

问题是背景图像没有留在 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;
}

我已经尝试过“cover”和“100% 100%”的背景尺寸，在这两种情况下，图像仍然溢出到下面的 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

经过多次尝试和错误，我通过向 jumbotron:after 伪元素添加 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;

}

Answer 2

您的代码不起作用，因为您给 background-image 一个错误的值。

正确的语法： background-image: url('path to image');

它有效。

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

您缺少两个关闭divs，一个用于jumbotron，一个用于容器。这可能是测试中心被jumbotron占用的原因

position:absolute 有必要吗？ IMO，不需要:after