问题

Question

问题

我希望将background-image中div.child的{{1}}相对定位到div.parent，而body的作用是{{1} }。另外，我希望overflow: hidden中的div.parent适用于top: 0而不是div.child，因此body在Y轴上的位置无关紧要（因此，div.parent中的div.parent无需调整）。

演示

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>的{{1}}不再起作用。

background-images框由白色overflow: hidden表示。

需要解决方案

我需要一个div.parent框，该框与div.parent拥有相同的outline，并且无论此.parent的位置如何，始终显示底层{{1 }}应用于background-image。重要：将body与.parent一起使用不起作用。这是因为，稍后我将使用与background-image相同的body，但要对其进行编辑（就像在小提琴中倒过来一样）。

Answer 1

如果您知道应用于父元素的不同值，则可以轻松计算背景属性并使子对象相对于其父对象保持不变：

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>

Answer 2

您需要将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>

如何相对于文档/正文相对于文档/正文定位元素的背景图像：父级隐藏设置？

问题

演示

需要解决方案

2 个答案: