我希望将background-image的div.child的div.parent相对于body定位，而overflow: hidden用于div.parent。另外，我希望top: 0的div.child适用于body而不是div.parent，以便div.parent在Y轴上的位置无关紧要（因此，top:的div.child无需调整）。
body {
position: relative;
margin: auto;
height: 1200px;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=562&q=80");
background-size: 100% auto;
background-position: top center;
}
.parent {
width: 80%;
height: 300px;
margin: 0 auto;
margin-top: 200px;
outline: 2px solid white; /* !!! Not visible anymore !!! */
overflow: hidden; /* !!! Ignored by .child !!! */
}
.child {
position: absolute;
z-index: -1;
width: 100%;
height: 600px;
top: -200px;
left: 0;
background-image: url("https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=562&q=80");
background-size: 100% auto;
background-position: top center;
filter: invert(1);
}<body>
<div class="parent">
<div class="child"></div>
</div>
</body>有两个background-images完全匹配（相同，一个倒置）。但是，应用于overflow: hidden的div.parent不再起作用。
div.parent框由白色outline表示。
我需要一个.parent框，该框具有与background-image相同的body，无论此.parent的位置如何，始终显示应用于background-image的底层body的摘录。 重要：将.parent与background: transparent一起使用不起作用。这是因为，我稍后将使用与应用于background-image相同的body，但使用的是[[edited（就像小提琴中的倒数一样）。
body {
position: relative;
height: 1200px;
margin:0;
background-image: url("https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=562&q=80");
background-size: 100% auto;
background-position: top;
overflow:auto;
}
.parent {
width: 80%;
height: 300px;
margin: 0 auto;
margin-top: 200px;
outline: 2px solid white;
position:relative;
overflow:hidden;
box-sizing:border-box;
}
.child {
position: absolute;
z-index: -1;
/* same as border */
top:-2px;
left: -2px;
right:-2px;
bottom:-2px;
/**/
background-image: url("https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=562&q=80");
background-size: calc(100%/0.8) auto; /*0.8 = 80% of the width */
background-position: top -200px center; /* Equal to margin*/
filter: invert(1);
}<body>
<div class="parent">
<div class="child"></div>
</div>
</body>position:relative添加到父div。检查下面的小提琴。希望能帮助到你。 body {
position: relative;
margin: auto;
height: 1200px;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=562&q=80");
background-size: 100% auto;
background-position: top center;
}
.parent {
width: 80%;
height: 300px;
margin: 0 auto;
margin-top: 200px;
outline: 2px solid white; /* !!! Not visible anymore !!! */
overflow: hidden; /* !!! Ignored by .child !!! */
/*Add Relative to parent*/
position: relative;
}
.child {
position: absolute;
z-index: -1;
width: 100%;
height: 600px;
top: -200px;
left: 0;
background-image: url("https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=562&q=80");
background-size: 100% auto;
background-position: top center;
filter: invert(1);
}<body>
<div class="parent">
<div class="child"></div>
</div>
</body>