。頁面背景色在CSS中不會改變

我想知道爲什麼我的CSS中的頁面背景色不能運行。我想爲我的頁面的內容提供白色背景，但是它仍然是透明的。。頁面背景色在CSS中不會改變

我認爲鏈接工作正常，因爲CSS中的「body」正常工作。但是，更改.page中的任何內容都不會改變瀏覽器中的任何內容。

@charset "UTF-8"; 
 

 
/* Global Content Formatting and Styles */ 
 

 
body { 
 
    color: #575c7a; 
 
    line-height: 1.5em; 
 
    font-family: Arial; 
 
    font-size: 14px; 
 
    background: #515673 url(../images/background_gradient.jpg) repeat-x 0px 0px; 
 
} 
 
.page { 
 
    max-width: 980px; 
 
    margin: 0px auto 0px auto; 
 
    position: relative; 
 
    background-color: #fff; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <meta name="viewport" content="width=device-width, maximum-scale = 1.0, minimum-scale=1.0, initial-scale=1.0" /> 
 
    <title>Lynda.com | Creating a Responsive Web Design</title> 
 
    <link rel="stylesheet" type="text/css" href="css/screen_styles.css" /> 
 
    <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" /> 
 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 500px)" href="css/screen_layout_small.css" /> 
 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width: 800px)" href="css/screen_layout_medium.css" /> 
 
    <!--[if lt IE 9]> 
 
\t \t \t <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
\t \t <![endif]--> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 

 
    <a href="#" class="logo"></a> 
 

 
    </header> 
 

 
    <article> 
 
    <h1>Welcome</h1> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure</a> dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    </article> 
 

 
    <div class="promo_container"> 
 

 

 
    <div class="promo"> 
 
     <div class="content"> 
 
     <h3>Promo Heading Here</h3> 
 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
     <p><a href="">Visit our blog</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="promo"> 
 
     <div class="content"> 
 
     <h3>Promo Heading Here</h3> 
 
     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p> 
 
     <p><a href="">Read the article</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="promo"> 
 
     <div class="content"> 
 
     <h3>Promo Heading Here</h3> 
 
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor inci did unt.</p> 
 
     <p><a href="">Learn more</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 

 
    <nav> 
 

 
    <a href="#">About Us</a> 
 

 
    <a href="#">Services</a> 
 

 
    <a href="#">Portfolio</a> 
 

 
    <a href="#">Contact Us</a> 
 

 
    </nav> 
 

 
    <footer> 
 
    &copy; Your Organization Name 
 
    </footer> 
 

 

 
</body> 
 

 
</html>

任何幫助將不勝感激。

來源

2015-02-06 Peter Lu

你永遠不會使用.page類。 – dfsq 2015-02-06 06:47:42

@dfsq - 或者更確切地說，它從不使用'page'類（注意刪除'.' - 這是用於css描述符，_not_用於html中的類名） – enhzflep 2015-02-06 07:41:24

如上所述，這是因爲你沒有在任何HTML元素上使用「page」類。 – Doidgey 2015-02-06 12:06:51

到目前爲止，你做的一切都很棒。
你只需要結合這兩個腳本。

<!DOCTYPE HTML> 
<html> 
    <style> 
body { 

    color: #575c7a; 
    line-height: 1.5em; 
    font-family: Arial; 
    font-size: 14px; 
    background: #515673 url(../images/background_gradient.jpg) repeat-x 0px 0px; 

} 

.page { 
    max-width: 980px; 
    margin: 0px auto 0px auto; 
    position: relative; 
    background-color: #fff; 
} 
    </style> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta name="viewport" content="width=device-width, maximum-scale = 1.0, minimum-scale=1.0, initial-scale=1.0" /> 
     <title>Lynda.com | Creating a Responsive Web Design</title> 
     <link rel="stylesheet" type="text/css" href="css/screen_styles.css" /> 
     <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" /> 
     <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 500px)" href="css/screen_layout_small.css" /> 
     <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width: 800px)" href="css/screen_layout_medium.css" /> 
     <!--[if lt IE 9]> 
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
    </head> 

    <body> 

     <header> 

      <a href="#" class="logo"></a> 

     </header> 

     <article> 
      <h1>Welcome</h1> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     </article> 

     <div class = "promo_container"> 


      <div class = "promo"> 
       <div class="content"> 
        <h3>Promo Heading Here</h3> 
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
        <p><a href="">Visit our blog</a></p> 
       </div> 
      </div> 


      <div class = "promo"> 
       <div class="content"> 
        <h3>Promo Heading Here</h3> 
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p> 
        <p><a href="">Read the article</a></p> 
       </div> 
      </div> 


      <div class = "promo"> 
       <div class="content"> 
        <h3>Promo Heading Here</h3> 
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor inci did unt.</p> 
        <p><a href="">Learn more</a></p> 
       </div> 
      </div> 


     </div> 

     <nav> 

      <a href="#">About Us</a> 

      <a href="#">Services</a> 

      <a href="#">Portfolio</a> 

      <a href="#">Contact Us</a> 

     </nav> 

     <footer> 
      &copy; Your Organization Name 
     </footer> 


    </body> 
</html>

來源

2015-02-06 06:51:04

這是什麼意思？ – Lee 2015-02-06 11:43:59

我想你說的是在<body class="page">中重寫機構的css規則。

但是，您在身體標記中使用背景作爲圖像時，您並不是通過使用.page中的背景顏色來重寫身體的背景，而是添加含有背景圖像和背景顏色的含義。所以，僅僅用background來覆蓋背景：

.page { 
    max-width: 980px; 
    margin: 0px auto 0px auto; 
    position: relative; 
    background: #fff;/* to override the background from body*/ 
}

來源

2015-02-06 06:51:05

由於事實上OP已經將背景圖像應用於身體，我會假設他的意圖是使用包裝內容的類來應用白色背景。所以 - 如果我遵循所有他需要做的就是用另外一個'page'類來包裝內容。然而，假設從來都不是很好！ – Doidgey 2015-02-06 12:09:25

我得到了它從第一body標籤添加一個div周圍的一切來結束一個工作和風格與你有.page我加入了一個例子很快。

http://jsfiddle.net/L7va61oy/

來源

2015-02-06 06:52:23

。頁面背景色在CSS中不會改變

回答

相關問題