如何使用溢出定位元素的背景图像相对于文档/正文：隐藏由父级设置？
[英]How to position element's background-image relative to document / body with overflow: hidden set by parent?
问题描述
Problem
问题
I want a background-image that is a div.child of a div.parent to be relatively positioned to the body , with overflow: hidden functioning for div.parent .我想要一个作为div.child的div.parent的background-image相对于body定位， overflow: hidden div.parent overflow: hidden功能。 Also, I want that top: 0 of div.child applies to body not div.parent so that it doesn't matter where div.parent is positioned on the Y-axis (thus, top: of div.child doesn't need to be adjusted).另外，我希望div.child top: 0适用于body而不是div.parent因此div.parent在 Y 轴上的位置无关紧要（因此， div.child top:不需要待调整）。
Demonstration示范
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>
There are two background-images that match perfectly (the same, one is inverted).有两个background-images完美匹配（相同，一个是倒置的）。 Nonetheless, overflow: hidden applied to div.parent doesn't work anymore.尽管如此，应用于div.parent overflow: hidden不再起作用。
The div.parent box is indicated by a white outline . div.parent框由白色outline指示。
Solution needed需要解决方案
I need a .parent box that holds the same background-image as the body and no matter where this .parent is positioned always shows the excerpt of the underlaying background-image applied to the body .我需要一个.parent框，它包含与body相同的background-image ，无论这个.parent位于何处，始终显示应用于body的底层background-image的摘录。 Important : Having .parent with a background: transparent doesn't work.重要提示：具有background: transparent .parent background: transparent不起作用。 This is because, I will later use the same background-image as applied to body , but one that is edited (like an inverted in the example fiddle).这是因为，我稍后将使用与应用于body相同的background-image ，但经过编辑的background-image （如示例小提琴中的倒置图像）。
2 个解决方案
解决方案1
2 2020-01-21 10:52:50
If you know the different values applied to the parent element you can easily calculate the background properties and keep the child relative to its parent:如果您知道应用于父元素的不同值，您可以轻松计算背景属性并使子元素相对于其父元素：
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
You need to add position:relative to the parent div.您需要添加position:relative到父 div。 Check the below fiddle.检查下面的小提琴。 Hope it helps.希望能帮助到你。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.