如何使用溢出定位元素的背景图像相对于文档/正文：隐藏由父级设置？
[英]How to position element's background-image relative to document / body with overflow: hidden set by parent?
问题描述
问题
我想要一个作为div.child的div.parent的background-image相对于body定位， overflow: hidden div.parent overflow: hidden功能。 另外，我希望div.child top: 0适用于body而不是div.parent因此div.parent在 Y 轴上的位置无关紧要（因此， div.child top:不需要待调整）。
示范
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完美匹配（相同，一个是倒置的）。 尽管如此，应用于div.parent overflow: hidden不再起作用。
div.parent框由白色outline指示。
需要解决方案
我需要一个.parent框，它包含与body相同的background-image ，无论这个.parent位于何处，始终显示应用于body的底层background-image的摘录。 重要提示：具有background: transparent .parent background: transparent不起作用。 这是因为，我稍后将使用与应用于body相同的background-image ，但经过编辑的background-image （如示例小提琴中的倒置图像）。
2 个解决方案
解决方案1
2 2020-01-21 10:52:50
如果您知道应用于父元素的不同值，您可以轻松计算背景属性并使子元素相对于其父元素：
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>
解决方案2
-1 2020-01-21 10:42:09
您需要添加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>
position：relative，overflow：隐藏父级和绝对子级
[英]position: relative, overflow: hidden parent and absolute child
如何更改元素的不透明度/透明度并保持人体背景图像仍然可见？
[英]How to change element's Opacity / Transparency and keep body background-image still visible?
相对定位父元素的溢出绝对定位伪元素设置为溢出：隐藏
[英]overflow absolute positioned psuedo element of a relative positioned parent set to overflow:hidden
html`height`和`body```background-image`应该如何处理？
[英]How should the html `height` and the `body's` `background-image` be handled?
如何使用jQuery选择器，获取图像的src并将其设置为另一个元素的背景图像？
[英]How to jQuery selectors, get an image's src and set it as a background-image of another element?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.