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

<强> Demo fiddle

CSS，HTML：里面的bootstrap div元素，填充背景

1 个答案: