ブートストラップ4 - <body>タグの背景イメージ

私はブートストラップを使い慣れていません。ブートストラップスタジオを使用してコードを学習しています。身体の背景イメージを追加し、navbarバックグラウンドをnoneに設定しても問題ありません。ブートストラップ4 - <body>タグの背景イメージ

追加される次のコンポーネント（この場合はジャンボトロンとボタン）に関する問題に直面しています。これらの2つのコンポーネントのそれぞれは、論理的な<body>の画像セットを通過しています。私が望むのは、透明なナビゲーションバーを作成し、バックグラウンドイメージを持たせることですが、ジャンボトロンとnavbarのためだけです。どうすればこれを達成できますか？

ありがとう、ごめんなさい、私の英語です。ここで

は、ここでHTMLコード

<body> 
    <div> 
     <div class="jumbotron" id="first-jumbo"> 
      <h1>Heading text</h1> 
      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> 
      <p><a class="btn btn-default" role="button" href="#">Learn more</a></p> 
     </div> 
     <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"><a href="#" class="navbar-brand navbar-link">brand </a> 
      <button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
     </div> 
     <div class="collapse navbar-collapse" id="navcol-1"> 
      <ul class="nav navbar-nav"> 
       <li role="presentation" class="active"><a href="#">first item</a></li> 
       <li role="presentation"><a href="#">second item</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
          <li class="divider"></li> 
          <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
    </div> 
    <button class="btn btn-default" type="button">Button</button> 
    <script src="assets/js/jquery.min.js"></script> 
    <script src="assets/bootstrap/js/bootstrap.min.js"></script> 
</body>

は、CSSのコードはここ

body { 
    background:url(../../assets/img/pexels-photo-294560.jpeg) no-repeat; 
    padding-top:100px; 
    background-size:cover; 
} 

.navbar { 
    background:none; 
} 

#first-jumbo { 
    text-align:center; 
}

である私はあなたが透明ジャンボトロンにしたいと思いますpage preview

出典

2017-08-19 cdrrrrr

あなたは透明な背景をしたいか、していない「私が欲しいのは透明のナビゲーションバーを作成し、背景画像を持っていることですか」？ –

私はそうですが、体の背景イメージを設定するのは解決策ではないようです。 – cdrrrrr

私は解決策を投稿しました。役立つことを願っています。 –

はこれを試してみてください：

body { 
    background:url(../../assets/img/pexels-photo-294560.jpeg) no-repeat !important; 
    padding-top:100px; 
    background-size:cover; 
} 

.navbar, #first-jumbo { 
    background: transparent !important; 
} 

#first-jumbo { 
    text-align:center; 
}

出典

2017-08-19 19:12:14

私はこのページのようなものを望んでいますhttps://www.creative-tim.com/ あなたはnavbarと背景画像を参照して、錠剤の下に？私は似たものが欲しい。 – cdrrrrr

のですか？使用、

#first-jumbo { text-align: center; background-color: transparent !important; }

出典

2017-08-19 19:08:37 Sandharu1

質問が何であるかわからない場合は、まずコメントを尋ねて答えてください。 –

ブートストラップ4 - <body>タグの背景イメージ

答えて

関連する問題