섹션 부분에 배경색을 추가하는 방법은 무엇입니까?

섹션 태그에 배경색을 추가하는 다른 방법이 있습니까? 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>

없습니다.

출처

2016-08-17 R3y

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

가 표시되지. – Justinas

섹션에 콘텐츠가 없기 때문입니다. 'height : 100px'를 추가하면 배경색을 볼 수 있습니다. – Pugazh

왜냐하면 #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>

출처

2016-08-17 09:34:05 kukkuz

전체 배경에 배경색을 표시하는 것을 의미합니다 ... – R3y

배경색을 전체 배경에 추가하려면 "body"태그에 추가하십시오. 그렇지 않은 경우이 대답은 정확합니다. – Imbue

@ R3y 전체 페이지에 색상을 적용하는 방법을 참조하십시오. – kukkuz

<section> 요소는 그룹화 컨테이너이다. 귀하의 예에서는 내용이 없으므로 표시되지 않습니다 (빨간 색 테두리를 추가하여<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 또는 콘텐츠를 추가 볼 수 있도록. #의 ABC` 어떤 내용을 포함하지 않는 '때문에

출처

2016-08-17 09:40:08 Pugazh

섹션 부분에 배경색을 추가하는 방법은 무엇입니까?

답변

관련 문제