我有一个 <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>
最佳答案
因为你正在使用这个:
#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
关于html - 为什么不显示除法的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25965462/