我已經在我的html上設置了背景，現在如何將一個ID的背景設置爲不同的顏色？

我是HTML和CSS的新手，我一直試圖弄清楚我一直在做錯什麼。我已經在我的html上設置了背景，現在如何將一個ID的背景設置爲不同的顏色？

我想設置背景顏色div與id =「transparentBox」是一個不同的顏色（最終是一個和灰白色的盒子有一些目前未知的不透明度設置）然而，它似乎被認爲是我的造型'通過CSS應用並沒有做到這一點。任何意見在這裏將不勝感激。

我已經在我的HTML上設置了背景，現在如何將一個ID的背景設置爲不同的顏色？

html 
 
    { 
 
\t  text-align: center; 
 
\t  background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) fixed; 
 
    } 
 

 
    body 
 
    { 
 
    \t text-align: center; 
 
    } 
 
    
 
    p 
 
    { 
 
    \t text-align: left; 
 
    } 
 
    
 
    .off 
 
    { 
 
    \t color: #F0FFFF; 
 
    } 
 
    
 
    #header 
 
    { 
 
    \t height:100px; 
 
    \t width:960px; 
 
    } 
 
    
 
    #header h1 
 
    { 
 
    \t position: relative; 
 
    \t text-align: left; 
 
    \t color: #000000; 
 
    \t font-size: 45px; 
 
    \t left: 5px; 
 
    \t top: 20px; 
 
    } 
 
    
 
    body 
 
    { 
 
    \t margin: 0px; 
 
    \t padding: 0px; 
 
    \t text-align: left; 
 
    \t font: 12px Arial, Helvetica, sans-serif; 
 
    \t font-size: 14px; 
 
    } 
 
    
 
    #navigationBar 
 
    { 
 
    \t height: 40px; 
 
    \t background-color: #F0FFFF; 
 
    \t border-color: #000000; 
 
    } 
 
    
 
    ul 
 
    { 
 
    \t list-style-type: none; 
 
    \t margin: 0px; 
 
    \t padding: 0px; 
 
    \t overflow: hidden; 
 
    \t background-color: #333; 
 
    } 
 
    
 
    li 
 
    { 
 
    \t float: left; 
 
    } 
 
    
 
    li a { 
 
    \t display: block; 
 
    \t color: white; 
 
    \t text-align: center; 
 
    \t padding-top: 13px; 
 
    \t padding-bottom: 13px; 
 
    \t padding-left: 15px; 
 
    \t padding-right: 15px; 
 
    \t text-decoration: none; 
 
    } 
 
    
 
    /* Change the link color to #111 (black) on hover */ 
 
    li a:hover 
 
    { 
 
    \t background-color: #111; 
 
    } 
 
    
 
    .active 
 
    { 
 
    \t background-color: #4CAF50; 
 
    } 
 
    
 
    #navigationMenu 
 
    { 
 
    \t margin-top: 0px; 
 
    \t height: auto; 
 
    \t background-color: #F0FFFF; 
 
    \t border-color: #000000; 
 
    \t border-radius: 25px; 
 
    } 
 
    
 
    #transparentBox 
 
    { 
 
    \t position: relative; 
 
    \t display: block; 
 
    \t margin: 10px; 
 
    \t padding: 10px; 
 
    \t width: 500px; 
 
    \t height: 400px; 
 
    \t background-color: #FFFFFF; 
 
    \t border-color: #000000; 
 
    \t border-radius: 10px; 
 
    }

<!DOCTYPE html> 
 
    <html xmlns="http://www.calebwolff.us"> 
 
    <head> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
     <meta http-equiv="refresh" content="30" /> 
 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    
 
     <title>Caleb Wolff's Personal Website</title> 
 
    </head> 
 
    <body> 
 
     <div id="header"> 
 
      <h1>Caleb<span class="off">Wolff</span></h1> 
 
     </div> 
 
     <div id="navigationBar"> 
 
      <ul> 
 
       <li><a href="http://www.calebwolff.us">Home</a></li> 
 
       <li><a href="https://www.facebook.com/calebwolffmusic/">Facebook</a></li> 
 
      </ul> 
 
     </div> 
 
     <div id="transparnetBox"> 
 
      <h1>HELLLOOO</h1> 
 
     </div> 
 
    </body> 
 
    </html>

來源

2017-07-16 Caleb Wolff

在CSS和HTML的ID名稱是不同的（錯誤），在CSS其 '#transparentBox' 和HTML是 'transparnetBox'。

請確保每個使用的ID名稱都相同。您可以隨時使用瀏覽器的開發工具，以<div id="transparnetBox">和# transparentBox之間的DOM元素檢查，檢查的造型

<!DOCTYPE html> 
<html xmlns="http://www.calebwolff.us"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" 
/> 
<meta http-equiv="refresh" content="30"/> 
<link rel="stylesheet" type="text/css" href="style.css"/> 

<title>Caleb Wolff's Personal Website</title> 
<style> 
    html { 
     text-align: center; 
     background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) fixed; 
    } 

    body { 
     text-align: center; 
    } 

    p { 
     text-align: left; 
    } 

    .off { 
     color: #F0FFFF; 
    } 

    #header { 
     height: 100px; 
     width: 960px; 
    } 

    #header h1 { 
     position: relative; 
     text-align: left; 
     color: #000000; 
     font-size: 45px; 
     left: 5px; 
     top: 20px; 
    } 

    body { 
     margin: 0px; 
     padding: 0px; 
     text-align: left; 
     font: 12px Arial, Helvetica, sans-serif; 
     font-size: 14px; 
    } 

    #navigationBar { 
     height: 40px; 
     background-color: #F0FFFF; 
     border-color: #000000; 
    } 

    ul { 
     list-style-type: none; 
     margin: 0px; 
     padding: 0px; 
     overflow: hidden; 
     background-color: #333; 
    } 

    li { 
     float: left; 
    } 

    li a { 
     display: block; 
     color: white; 
     text-align: center; 
     padding-top: 13px; 
     padding-bottom: 13px; 
     padding-left: 15px; 
     padding-right: 15px; 
     text-decoration: none; 
    } 

    /* Change the link color to #111 (black) on hover */ 
    li a:hover { 
     background-color: #111; 
    } 

    .active { 
     background-color: #4CAF50; 
    } 

    #navigationMenu { 
     margin-top: 0px; 
     height: auto; 
     background-color: #F0FFFF; 
     border-color: #000000; 
     border-radius: 25px; 
    } 

    #transparnetBox { 
     position: relative; 
     display: block; 
     margin: 10px; 
     padding: 10px; 
     width: 500px; 
     height: 400px; 
     background-color: #FFFFFF; 
     border-color: #000000; 
     border-radius: 10px; 
    } 
</style> 
</head> 

<body> 
<div id="header"> 
<h1>Caleb<span class="off">Wolff</span></h1> 
</div> 

<div id="navigationBar"> 
<ul> 
    <li><a href="http://www.calebwolff.us">Home</a></li> 
    <li><a href="https://www.facebook.com/calebwolffmusic/">Facebook</a></li> 
</ul> 
</div> 

<div id="transparnetBox"> 
<h1>HELLLOOO</h1> 
</div> 
</body> 
</html>

來源

2017-07-16 06:44:22

謝謝！我不敢相信我花了那麼多時間。一雙新鮮的眼睛總是有幫助的！非常感謝！ –

歡迎@CalebWolff，快樂編碼 –

添加顏色造型的<html>標籤，而不是<body>標籤是有點不尋常。爲什麼不將它更改爲<body>標籤？

在另一方面，試試這個：

#transparentBox 
{ 
    position: relative; 
    display: block; 
    margin: 10px; 
    padding: 10px; 
    width: 500px; 
    height: 400px; 
    background-color: #FFFFFF !important; 
    border-color: #000000; 
    border-radius: 10px; 
}

來源

2017-07-16 06:36:15 rpivovar

如果主體不佔用整個屏幕，更改主體標籤內的背景可能會導致頁面在頁面底部顯示爲白色。我在手機上遇到了這個問題。 –

檢查錯字。你必須在瀏覽器中檢查你的區塊，看到你沒有這個組件的任何樣式，而不僅僅是「背景顏色」。

來源

2017-07-16 07:02:19 Andrew

對不起，我明白錯別字部分，但可否解釋答案的第二部分？ –

@CalebWolff，我做的第一件事是在瀏覽器中打開你的代碼，檢查破損的組件，看看沒有任何樣式。所以，最明顯的變體是一個錯字。 – Andrew

我明白了，我必須努力理解前端開發的基本調試技巧。謝謝！ –

要更改背景有兩種方法

更改顏色通常沒有陰影的

html { text-align: center; background: linear-gradient(to top right, #33ccff 70%, #0066ff 100%) fixed; }
與漸變色調改變顏色你應該改變HTML樣式的顏色6位數的顏色代碼
html { text-align: center; background: linear-gradient(to top right, #33ccff 70%, #0066ff 100%) fixed; } 有色鱈魚列表這些顏色的不透明度設置爲百分比。您可以嘗試這兩種方法中的任何一種。

來源

2017-07-16 08:54:45 Girisha

我的歉意，我成功地改變了背景。這不是我所要求的。我試圖改變身體內一個id的背景顏色。 –

我已經在我的html上設置了背景，現在如何將一個ID的背景設置爲不同的顏色？

回答

相關問題