首先，我想说我是新手。所以，这就是我的情况。
我为整个身体设置了背景图像。
我在所有页面中都包含一个div .wrapper。它的主要目的是使我的内容保持集中和有条理。它的背景色设置为灰色。
在div .wrapper内部，还有另一个div .example。
我希望这个特定的div .example可以获取主体的背景图像，而不是.wrapper的颜色，但仍保留.wrapper的其余属性。可能吗？我尝试不将.example的背景图像设置为与主体相同，因为我认为它显示为“外来”对象...
<html>
...
<body>
<div class="wrapper">
<div class="example">
<img src="example.png">
</div>
</div> <!-- Wrapper -->
</body>
</html>
body {
background: #ffffff url("bg.jpg") repeat;
background-size: 4%;
background-position: center;
}
.wrapper {
width: 80vw;
margin: auto;
padding: 0px 0px;
background: #e9eaed;
display: block;
}
.example {
width: 100%;
/* background-color: #f6c5b6;*/
}
.example img {
width:40%;
margin: 40px auto;
display: block;
}
最佳答案
实现此目的的唯一方法是围绕它构建div。
.body {
background-image: url('http://placekitten.com/g/40/40');
width: 500px; height:700px; background-repeat:repeat;
}
.wrapper {
width:300px; height:50px; background:grey; margin:0 auto;
}
.mask {
width: 300px; height:100px; margin:0 auto;
}
.left {
width: 50px; height:100px; float:left; background:red;
}
.right {
width: 50px; height:100px; float:right; background:red;
}<div class='body'>
<div class="wrapper">
box 1
</div>
<div class="mask">
<div class="left">
box 2
</div>
<div class="right">
box 3
</div>
</div>
<div class="wrapper">
box 4
</div>
</div>关于html - 跳过/忽略 parent (.wrapper)的背景设置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27604092/