Question

我有一个<div>嵌套在另一个。父<div>有一个背景图片。我希望嵌套的<div>具有背景色，但它会一直显示其父级的背景图像。

＆＃13;

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;	
}

＆＃13;

<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>

＆＃13;

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

Answer 2

This is working
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fca205;
}


#poem {
width: 70%;

background-color: black;
}


div {
width: 30%;
border: 3px gold solid;
margin: 1em auto;
}
#outer{

 background-image: url("paper.gif");

 }

blockquote {
color: white;
font-family: Georgia;
font-size: 16px;    
}</style>
</head>
<body>
<div id="outer" >
 <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>

  </body>
  </html>

为什么没有出现分区的背景颜色？

2 个答案: