html - CSS, HTML : 内部引导 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:relativeto.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;
 }

演示小提琴