2017-05-30 19 views
6

Mam stronę HTML, który wygląda jak tenkolor tła dla elementu body z predefiniowanym wysokości w css

body { 
 
    height: 200px; 
 
    background-color: lightblue; 
 
    padding: 0px; 
 
    border: 1px solid red; 
 
}
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <p> First para </p> 
 
    <p> Second para </p> 
 

 
</body> 
 

 
</html>

tu określonym ciało height jak 200px i background-color dla elementu body jako „lightblue ". Dlaczego urządzenie background-color jest stosowane do całej strony, a nie tylko do wzrostu ciała?

+0

[CSS-Tricks.com: tylko jeden z tych dziwnych rzeczy Około CSS: Tło na ] (https://css-tricks.com/just-one-of-those -weird-things-about-css-background-on-body /) – CBroe

+2

To jest bardzo dobre wyjaśnienie https://stackoverflow.com/a/17817919/2894798 –

Odpowiedz

7

W przypadku braku tła na elemencie HTML, tło ciała pokryje stronę. Jeśli na elemencie HTML znajduje się tło, tło ciała zachowuje się jak każdy inny element.

Źródło: css-tricks.com

Tak więc, aby temu zapobiec, można po prostu określić background-color:white dla html.

html { 
 
    background-color: white; 
 
} 
 

 
body { 
 
    height: 200px; 
 
    background-color: lightblue; 
 
    padding: 0px; 
 
    border: 1px solid red; 
 
}
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <p> First para </p> 
 
    <p> Second para </p> 
 

 
</body> 
 

 
</html>

Powiązane problemy