html - CSS, HTML : inside bootstrap div element, 填充背景

Question

我正在尝试填充 bootstrap jumbotron 的背景

我的代码是

.jumbotron {
    padding: 5px;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 200;
    line-height: 2.1428571435;
}

.jumbotron  div#bg:after {
    content: "";
    background: url("image.jpg");
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
}

以及我要填充的元素

<div class="jumbotron">
  <div id="bg"></div>
  <p><a class="btn btn-lg btn-success" href="http://github.com" target="blank">GitHub</a></p>
</div>

但是这段代码填充了整个页面，而我想要的只是填充选定的元素。

我应该如何使用 CSS 做到这一点？

Answer 1

你需要在 .jumbotron 中添加 position:relative 来限制绝对定位的元素在它的边界内，你也不需要空的 div，你可以在 .jumbotron 本身上使用 :after 伪元素:

 .jumbotron {
     position: relative;
     background: none;
     padding: 5px;
     margin-bottom: 5px;
     font-size: 10px;
     font-weight: 200;
     line-height: 2.1428571435;
 }
 .jumbotron:after {
     content:"";
     background: url("image.jpg");
     opacity: 0.2;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     position: absolute;
     z-index: -1;
 }

Demo fiddle