3

ブートストラップジャンボトロンの背景を埋めようとしています

私のコードは

.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でこれを行うにはどうすればよいですか？

4

1 に答える 1

5

絶対に配置された要素をその境界に制限するために追加する必要があり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;
 }

デモフィドル

于 2013-09-20T06:34:24.357 に答える