CSS,HTML:里面的bootstrap div元素,填充背景

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

你需要添加position:relative以.jumbotron限制绝对定位的元素到它的边界,你也不需要空div,你可以只使用自身的:after伪元素.jumbotron:

 .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;
 }

演示小提琴