html - 为什么不显示除法的背景颜色？

Question

我有一个 <div>嵌套在另一个。家长<div>有背景图片。我想要嵌套的 <div>有背景色，但它一直显示其父级的背景图像。

body {
  background-color: #fca205;
}


#poem {
  width: 70%;
  background-color: black;
}


div {
  width: 30%;
  border: 3px gold solid;
  margin: 1em auto;
  background-image: url("images/TigerPattern.jpg");
}

blockquote {
  color: white;
  font-family: Georgia;
  font-size: 16px;	
}

<div>
  <div id="poem">
    <blockquote> 				
      Tiger, tiger, burning bright	 
      In the forests of the night,	 
      What immortal hand or eye	 
      Could frame thy fearful symmetry?	 
    </blockquote>
    <br>
  </div>
</div>

Answer 1

因为你正在使用这个:

 #poem {
    width: 70%;
    background-color: black;
 }


 div {
    width: 30%;
    border: 3px gold solid;
    margin: 1em auto;
    background-image: url("images/TigerPattern.jpg");
 }

因此，您正在为 #poem 定义背景颜色，但您随后覆盖了 div 元素的所有属性，因此您的背景属性如下所示:

#poem{background: url('http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303') repeat scroll 0% 0% transparent;}

因此，你需要使用这个:

 body {
     background-color: #fca205;
 }
 #poem {
     width: 70%;
     background: black;
 }
 div {
     width: 30%;
     border: 3px gold solid;
     margin: 1em auto;
     background: url("http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303");
 }
 blockquote {
     color: white;
     font-family: Georgia;
     font-size: 16px;
 }

或者更好的是，永远，永远，永远，将属性分配给 div 除非你真的需要它，最好使用 class

See fiddle here