BinaryDevelop
  1. ホーム
  2. html

[解決済み] Jumbrotronの背景色を変更するには？

2022-02-16 10:12:31

質問

jumbotron' クラスの背景色を変更する方法を教えてください。 background-color #eee をbootstrap.cssに追加しました。

これを消して上書きしようとしたところ、属性に none , none !important , transparent をカスタムCSSに追加しましたが、まだうまくいきません。

ブラウザのウィンドウで要素を検査し、そこでプロパティを削除して変化があるかどうか試してみましたが、やはり同じ問題です。

色を完全に削除する以外は、他の色を採用します。なぜこのような質問をするかというと、私は完全な背景画像を持っているので、ジャンボトロンを背景や色のない単純な透明にしたいからです。そうでない限りは。

BootStrap 3.1.1のドキュメントで、そこでも確認したのですが、何か見落としているのでしょうか？

注：jsfiddle.netを使って簡単に表示したいのですが、3.1.1をサポートしておらず、ブートストラップをどのように実装すればいいのかわかりません。

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

解決方法は？

クラスを削除するだけ full から <html> に追加し、それを <body> タグを使用します。次に、スタイル background-color:transparent !important; をJumbotron divに追加します（Amit Jokiが回答したとおりです）。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します