無法更改主體的背景顏色

我爲簡單的一個頁面應用程序編寫代碼。我想將背景顏色（不包括導航欄& jumbotron）從默認白色更改爲其他顏色。我無法在CSS表單中覆蓋白色。無法更改主體的背景顏色

rate.html

body 
 
    { 
 
    \t background:#2c3e50; 
 
    }

<html> 
 
     <head> 
 
     \t <title></title> 
 
     \t <link rel="stylesheet" type="text/css" href="effects.css"> 
 
     \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     
 
     
 
     \t <script 
 
      src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
      crossorigin="anonymous"></script> 
 
      
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
     
 
     </head> 
 
     <body> 
 
     
 
     \t <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
      <div class="container-fluid"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div> 
 
     Rate Gitam</a> 
 
      </div> 
 
      <p class="navbar-text">Gitam university's first rating site</p> 
 
     \t </div><!-- /.navbar-collapse --> 
 
     \t </nav> 
 
     \t <div class="jumbotron"> 
 
     \t \t <h1>Rate your professor</h1> 
 
     \t \t <p>Rate your professor and choice of your elective on a five point scale</p> 
 
     \t \t 
 
     \t </div> 
 
     \t <div class="col"> \t 
 
     \t <form class="form-horizontal "> 
 
      <div class="form-group"> 
 
      <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label> 
 
      <div class="col-lg-3"> 
 
       <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="inputPassword3" class="col-sm-2 control-label">rating</label> 
 
      <div class="col-lg-3"> 
 
       <input type="text" class="form-control" id="inputPassword3" placeholder="Rating"> 
 
      </div> 
 
      </div> 
 
     
 
      <div class="form-group"> 
 
      <div class="col-sm-offset-2 col-sm-10"> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     
 
     </body> 
 
     </html>

來源

2017-03-05 priyatham

什麼元素有「白」色？ –

總是包括您在所有其他樣式這樣結束CSS。

<head> 
     <title></title> 
     <link rel="stylesheet" type="text/css" href="effects.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<link rel="stylesheet" href="css/style.css"> <!-- your custom stylesheet. you should create this stylesheet and add your styles here --> 


     <script 
     src="https://code.jquery.com/jquery-3.1.1.min.js" 
     integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
     crossorigin="anonymous"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 


    </head>

我編輯了自己的片段也

body 
 
    { 
 
    \t background:#2c3e50; 
 
    }

<html> 
 
     <head> 
 
     \t <title></title> 
 
     \t 
 
     \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" type="text/css" href="effects.css"> <!-- if this is your stylesheet, use it here. if not, use your stylesheet here like i mentioned above --> 
 
     
 
     
 
     \t <script 
 
      src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
      crossorigin="anonymous"></script> 
 
      
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
     
 
     </head> 
 
     <body> 
 
     
 
     \t <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
      <div class="container-fluid"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div> 
 
     Rate Gitam</a> 
 
      </div> 
 
      <p class="navbar-text">Gitam university's first rating site</p> 
 
     \t </div><!-- /.navbar-collapse --> 
 
     \t </nav> 
 
     \t <div class="jumbotron"> 
 
     \t \t <h1>Rate your professor</h1> 
 
     \t \t <p>Rate your professor and choice of your elective on a five point scale</p> 
 
     \t \t 
 
     \t </div> 
 
     \t <div class="col"> \t 
 
     \t <form class="form-horizontal "> 
 
      <div class="form-group"> 
 
      <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label> 
 
      <div class="col-lg-3"> 
 
       <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="inputPassword3" class="col-sm-2 control-label">rating</label> 
 
      <div class="col-lg-3"> 
 
       <input type="text" class="form-control" id="inputPassword3" placeholder="Rating"> 
 
      </div> 
 
      </div> 
 
     
 
      <div class="form-group"> 
 
      <div class="col-sm-offset-2 col-sm-10"> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     
 
     </body> 
 
     </html>

來源

2017-03-05 07:50:36 Lucian

用這種方法你不能覆蓋背景顏色檢查你的代碼片段。 – neophyte

這段代碼將不起作用，因爲這裏沒有在外部樣式表中定義的樣式。 OP將做到這一點，它的作品。我剛剛複製了他的片段，使他更容易理解。在我剛纔指出的片段中，他可以添加樣式表 – Lucian

正確地提到，在你的答案，否則OP會弄糊塗..只是一個建議:) – neophyte

只需在頭部添加額外的CSS引導css文件

<style> 
    body { 
     background-color: <colorCode> 
    } 
</style>

來源

2017-03-05 07:51:06 lkdhruw

您需要添加後你的風格在其他css文件之後，以便它們不會結束騎你寫的任何東西。

之前

<style> 
    body { 
     background-color: #yourcolor 
    } 
</style>

來源

2017-03-05 07:54:02

添加這個默認引導CSS有白色作爲機身底色，所以爲了改變它，你需要重寫它。在這種方式 -

<style type="text/css"> 
body { background: navy !important; } 
</style>

但建議不要使用!important。所以請儘量考慮以下方法 -

您應該始終將您的代碼包裝在容器或容器流體中。正如你想添加背景顏色的身體，所以包裝一切class="container-fluid"。然後設計它。

如果您不想使用jumbotron的背景顏色，請使用class="row"中的colr。

此外，您在HTML標記中還存在一些基本問題。你的專欄應始終在class="row"之下。

.container-fluid 
 
    { 
 
    \t background-color: #2c3e50; 
 
    }

<html> 
 
     <head> 
 
     \t <title></title> 
 
     \t 
 
     \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     
 
     
 
     \t <script 
 
      src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
      crossorigin="anonymous"></script> 
 
      
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
     
 
     </head> 
 
     <body id="bdy"> 
 
     
 
     \t <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
      <div class="container-fluid"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div> 
 
     Rate Gitam</a> 
 
      </div> 
 
      <p class="navbar-text">Gitam university's first rating site</p> 
 
     \t </div><!-- /.navbar-collapse --> 
 
     \t </nav> 
 
      <div class="container-fluid"> 
 
     \t <div class="jumbotron"> 
 
     \t \t <h1>Rate your professor</h1> 
 
     \t \t <p>Rate your professor and choice of your elective on a five point scale</p> 
 
     \t \t 
 
     \t </div> 
 
      <div class="row"> 
 
     \t <div class="col"> \t 
 
     \t <form class="form-horizontal "> 
 
      <div class="form-group"> 
 
      <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label> 
 
      <div class="col-lg-3"> 
 
       <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="inputPassword3" class="col-sm-2 control-label">rating</label> 
 
      <div class="col-lg-3"> 
 
       <input type="text" class="form-control" id="inputPassword3" placeholder="Rating"> 
 
      </div> 
 
      </div> 
 
     
 
      <div class="form-group"> 
 
      <div class="col-sm-offset-2 col-sm-10"> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     </body> 
 
     </html>

注

一個答案說，你應該始終包含引導的CDN這也是你應該考慮的另一件事情後，你的樣式表。

希望這會有所幫助！

來源

2017-03-05 08:00:46 neophyte

兩個不同的CSS選擇器告訴背景顏色是。因爲背景顏色被bootstrap中的以下css覆蓋。你可以通過在body標籤中添加白色來解決這個問題。

<body style="background-color:#2c3e50;">

檢查：Specifics on CSS Specificity

來源

2017-03-05 08:16:27

使用!important標誌覆蓋以前跟你的新行爲的CSS行爲。下面運行片段：

body 
 
    { 
 
    \t background:#2c3e50 !important; 
 
    }

<html> 
 
     <head> 
 
     \t <title></title> 
 
     \t <link rel="stylesheet" type="text/css" href="effects.css"> 
 
     \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     
 
     
 
     \t <script 
 
      src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
      crossorigin="anonymous"></script> 
 
      
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
     
 
     </head> 
 
     <body> 
 
     
 
     \t <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
      <div class="container-fluid"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div> 
 
     Rate Gitam</a> 
 
      </div> 
 
      <p class="navbar-text">Gitam university's first rating site</p> 
 
     \t </div><!-- /.navbar-collapse --> 
 
     \t </nav> 
 
     \t <div class="jumbotron"> 
 
     \t \t <h1>Rate your professor</h1> 
 
     \t \t <p>Rate your professor and choice of your elective on a five point scale</p> 
 
     \t \t 
 
     \t </div> 
 
     \t <div class="col"> \t 
 
     \t <form class="form-horizontal "> 
 
      <div class="form-group"> 
 
      <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label> 
 
      <div class="col-lg-3"> 
 
       <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="inputPassword3" class="col-sm-2 control-label">rating</label> 
 
      <div class="col-lg-3"> 
 
       <input type="text" class="form-control" id="inputPassword3" placeholder="Rating"> 
 
      </div> 
 
      </div> 
 
     
 
      <div class="form-group"> 
 
      <div class="col-sm-offset-2 col-sm-10"> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     
 
     </body> 
 
     </html>

所有的最好成績。

編輯：或者將您的css樣式表文件包含在引導程序或任何庫旁邊。（在頭的末端）

來源

2017-03-05 08:34:17

無法更改主體的背景顏色

回答

相關問題