web-dev-qa-db-ja.com

ジャンボトロンの背景色を変更するには？

'jumbotron'クラスの背景色を変更する方法を知りたいのですが、bootstrap.cssにデフォルトのbackground-color #eeeがあります。

これを消去して属性none、none !important、transparentをカスタムcssに与えることでオーバーライドしようとしましたが、まだ機能しません。

ブラウザーウィンドウで要素を検査し、そこにあるプロパティを削除して、変更があったかどうかを確認しようとしましたが、それでも同じ問題です。

色を完全に削除する以外は、他の色を採用します。私がこれを求めているのは、完全な背景画像があり、ジャンボトロンに背景や色を付けずに単純に透明にしたいからです。場合を除き、

私がそこでチェックしたBootStrap 3.1.1ドキュメンテーションから何かが欠けています。

注：jsfiddle.netを使用して簡単に表示できますが、3.1.1をサポートしておらず、bootstrapの実装方法がわかりません。

HTML

<title>Full Page Image Background Template for Bootstrap 3</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom CSS for the 'Full' Template -->
<link href="css/full.css" rel="stylesheet">

<!--Displays the Navigation Bar Style-->
<div class="navbar navbar-default navbar-fixed-top">
    <!--Displays the Navigation Bar Content-->
    <div class="navbar-header">
        <!-- displays the icon bar in responsive view; when clicked reveals a list-->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <!-- displays the icon bars in responsive view;-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!--Brand, Logo of your website-->
        <a class="navbar-brand" href="#">Virtual Productionz, Inc.</a>
    </div>

    <!-- Allows collapse/show navbar in responsive view-->
    <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <!-- Dropdown menu-->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Integrated Laser Keyboard</a></li>
              <li><a href="#">More...</a></li>
            </ul>
          </li>
          <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>


<div class="jumbotron">
    <h1>Welcome!</h1>
    <p>We're an awesome company that creates virtual things for portable devices.</p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>


<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>

CSS（w/bootstrap.css）

@import url("bootstrap.min.css");
@import url("bootstrap-theme.css");

body {
margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
}

.full {
 /*background: url(http://placehold.it/1920x1080) no-repeat center center fixed;*/
 background: url("../images/laser_keyboard.jpg") no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

.jumbotron{
color: #FFFFFF;
/*background-color:none !important;*/
}
htmlcsstwitter-bootstraptwitter-bootstrap-3background-color
33
TheAmazingKnight

クラスfullを<html>から削除し、<body>タグに追加するだけです。次に、ジャンボトロンdivのスタイルbackground-color:transparent !important;を設定します（Amit Jokiが答えで言ったように）。

14
shin

これを試して：

<div style="background:transparent !important" class="jumbotron">
    <h1>Welcome!</h1>
    <p>We're an awesome company that creates virtual things for portable devices.</p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

インラインCSSは、.cssファイルで定義されたクラスおよび<style>内で宣言されたクラスよりも優先されます

25
Amit Joki

必ずしもカスタムCSS（またはさらに悪いインラインCSS）を使用する必要はありません。Bootstrap 4では、次のように 色のユーティリティクラス を使用できます。

<div class="jumbotron bg-dark text-white">
...

また、デフォルト以外の色が必要な場合は、同じ命名規則を使用してbgクラスを追加してください。これにより、コードが簡潔で理解しやすくなります。

見出しのように、ジャンボトロン内の子要素にテキストホワイトを設定する必要がある場合もあります。

6
Andreas Bergström

これをcssファイルに追加します

.jumbotron {
    background-color:transparent !important; 
}

それは私のために働いた。

4
David

また、必要な機能/変更を含むカスタムジャンボトロンを作成し、そのクラスをHTMLに適用することもできます。

.jumbotronTransp {
   padding: 30px;
   margin-bottom: 30px;
   font-size: 21px;
   font-weight: 200;
   line-height: 2.1428571435;
   color: inherit;
   background-color: transparent;
}
2
Quent

ジャンボトロンの別のクラス

bg-transparent

それは完全に動作します

ブートストラップカラードキュメント： https://getbootstrap.com/docs/4.3/utilities/colors/

1
Dimitriy Bakhanenko

HTMLファイル自体で、style属性を使用してジャンボトロンの背景色を変更します。
<div class="jumbotron" style="background-color:#CFD8DC;"></div>

1
Debopriyo Basu

.cssで試してください

.jumbotron {
    background-color:red !important; 
}
0
Rob Jones
.jumbotron {
background-color:black !important;

}

この1行のコードを.cssファイルに追加してください、私のために働いた！

0
Karan Motwani

別のスタックオーバーフローの回答で述べたように、！importantの使用は推奨されません。

Boostrapでは、idはクラスよりも優先度が高く、クラスは要素よりも優先度が高くなります。

最適な解決策は、次のように、ページのルート要素に任意のIDを追加することです

<body id="my-body">
    <!-- your html code --> 
</body>

次に、そのIDを使用して要素またはクラスを選択します。

#my-body .jumbotron{
    /*Your css elements and values here.*/
}
0
Leonardo

<header>クラスにジャンボトロンを配置し、CSSのヘッダークラ​​スにbackground-color: black !important;を追加しました。

0
Levi Johnson

以下を使用して、ジャンボトロンの背景色を変更できます。

<div class="container">
    <div class="jumbotron text-white" style="background-color: #8c6278;">
        <h1>Coffee lover project !</h1>
    </div>
</div>
0
Mahdi Ghelichi

内部スタイルを追加することは、SEOとパフォーマンスには適しません。 divにidを追加します。 id = "jumbocustom"およびスタイル設定

#jumbocustom
   {
 background:red;
   }
0
jonah