2016-08-17 7 views
3

セクションタグに背景色を追加する方法はありますか? body {background-color: blue;}を使用する以外は、セクションに背景色を追加する他の方法は何ですか?セクションパートに背景色を追加するにはどうすればよいですか?

私はこのようなセクションの背景色を追加しようとしています:私のブラウザ上に表示何色が

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing</title> 
     <style> 
      #ABC { 
       background-color: blue; 
      } 
     </style> 
    </head> 
    <body> 
     <section id="ABC"> 
     </section> 
    </body> 
</html> 

はありません。

+1

。 – Justinas

+0

あなたのセクションにはコンテンツがないためです。 'height:100px'を追加すると、背景色が見えます。 – Pugazh

答えて

3

これは#ABCにコンテンツがないか、高さがないためです!

高さを設定したときに何が起こったのかを見てください。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Testing</title> 
 

 
    <style> 
 

 
    #ABC { 
 
     background-color: blue; 
 
     height: 100%; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
    } 
 

 
    body{ 
 
     background: grey; 
 
     margin: 0; 
 
    } 
 

 
    </style> 
 

 
    </head> 
 

 
    <body> 
 

 
<section id="ABC"> 
 

 

 
</section> 
 

 
    </body> 
 
</html>

<section>
+0

背景全体に背景色を表示することを意味します... – R3y

+0

背景色を背景全体に追加したい場合は、 "body"タグに追加します。そうでない場合、この答えは正しいです。 – Imbue

+0

@ R3yページ全体に色をどのように適用したか参照してください – kukkuz

0

要素がグループ化コンテナです。あなたの例ではコンテンツは表示されないため、表示されません(赤色の枠線を追加して<section>をハイライトしました)。

<section>を強調:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Testing</title> 
 
    <style> 
 
    #ABC { 
 
     background-color: blue; 
 
     border: 1px solid red; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <section id="ABC"> 
 

 
    </section> 
 
</body> 
 

 
</html>

が見えるように、背景色のためにあなたの<section>heightやコンテンツを追加してみてください。 #1 ABC`は、任意のコンテンツが含まれていない `ので示していない

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Testing</title> 
 
    <style> 
 
    #ABC { 
 
     background-color: blue; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <section id="ABC"> 
 
    Some text here 
 
    </section> 
 
</body> 
 

 
</html>

関連する問題