如何用 child div 屏蔽 parent div?
How to mask parent div with child div?
parent 中有一个连续的背景图块,例如:
#parent{
background: url('tile-bg-under-menu.png') repeat-x center 32px;
height: 151px;
width: 100%;
background-attachment: fixed;
}
然后,我有 child,它位于 parent 之上,还有另一张图片,如下所示:
#parent .child {
background: url('menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
margin-top: -20px;
}
所以,我想 hide
#parent
div 的宽度和高度在 .child
div 后面的确切部分#parent
div。
我正在寻找类似 clip
的逆函数或任何可以相同工作的东西(用 child 掩盖 parent)。
提问原因:
我问这个的原因是因为:.child
div 有一个半反式 parent 背景,有一部分重叠 #parent
"horizontal tile" 这也是半反式 parent;因此,当他们相遇时,他们的 semitransparent 部分 cover/intersect 每个都在那个部分,这是丑陋的,而且这不是图形计划的一部分。
编辑:我不能使用 jpg,因为 div 浮在 "dynamic" 内容之上。
我试过:
- 制作
::before
和 ::after
work-around,在它们之外,但是 我无法获取内容(背景图块)到达浏览器的末端 window。
- 制作一个宽度为 4k 的 png,并且正好在
.child
所在的部分为空。这并不像听起来那么糟糕,但是根据不同的浏览器,像素会向左或向右移动。
解决方案可以是 CSS 或 JavaScript - 没关系。
似乎没有等同于逆剪裁的方法:Is there an inverse to the CSS "Clip" property; hide the clipped area?
澄清:
div 部分看起来像这样:
[(#parent
)平铺部分]{[-这里曲线向下.child
重叠部分]这里曲线向上-}[(#parent
)平铺部分]
演示 fiddle:https://jsfiddle.net/iorgu/13k2hn9y/
片段:
header{
position: fixed
}
/*#masthead */
/*top: 25px;*/
#parent {
background: url('https://ladyfx.ae/wp-content/uploads/2018/01/upper-menu-bg.png') repeat-x center 8px;
height: 151px;
width: 100%;
background-attachment: fixed;
}
/*.header-wrap*/
#parent .child {
background: url('https://ladyfx.ae/wp-content/uploads/2018/03/menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
}
#parent, #parent .child{
pointer-events: none;
}
#parent .child .container{
pointer-events: all;
}
<div id="page" class="hfeed site">
<header id="parent" class="site-header" role="banner">
<div class="child"><!-- .header-wrap -->
</div>
</header><!-- #masthead -->
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dui in quam placerat aliquet. In semper lectus sed lectus iaculis blandit. Etiam egestas ex ac rhoncus commodo. Praesent sagittis eget ante nec interdum. Suspendisse tempus est ac libero rhoncus, laoreet pulvinar mi sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis tincidunt ipsum. Mauris nec arcu mollis, pellentesque nisi vitae, gravida sem. Duis vel velit vel lectus rhoncus luctus a vitae nulla. Nunc nec enim sapien. Quisque tempus dolor at viverra pharetra. Vivamus molestie bibendum sapien, vitae iaculis nisl fringilla euismod. Integer quis tincidunt ligula, at vulputate risus.
In vitae purus nec massa viverra mattis quis id lacus. Pellentesque cursus sapien nec tortor faucibus, sit amet sodales tortor faucibus. Aliquam pulvinar sollicitudin urna, ac suscipit sapien venenatis quis. Morbi eu risus in massa pretium molestie. Fusce rhoncus orci in ornare consectetur. Sed volutpat tristique nibh congue finibus. Integer semper sagittis sem vitae varius. Sed sit amet tellus in justo dictum fringilla. Pellentesque dignissim congue nulla non tincidunt. Etiam tempor ante metus, vel pretium est dapibus at.
Etiam eu consequat leo, sit amet placerat ex. Nullam sit amet lectus turpis. Curabitur ac euismod mauris, quis semper ex. Proin efficitur, odio nec tempus blandit, mauris nisl commodo turpis, a tempor lectus purus quis ex. Aliquam id ipsum risus. Mauris quis massa ut dui porttitor pharetra. Nulla aliquam tellus vitae odio rutrum efficitur. Vivamus accumsan iaculis augue, sit amet dignissim turpis aliquam sed.
Quisque finibus fringilla est vitae lobortis. Duis quis egestas nunc, vel ultricies velit. Sed blandit dolor erat, eu placerat tellus ornare dictum. Suspendisse suscipit, tortor ut auctor facilisis, lacus nisl tempor nunc, non mollis nibh velit ut elit. Duis vel laoreet quam, sit amet egestas diam. Fusce aliquam dignissim ante id bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus gravida, augue at consequat mattis, diam nisl porta enim, in gravida dui tortor et tortor. Phasellus elit lacus, luctus sit amet neque id, lobortis placerat est. Donec ac tristique mi. Nulla facilisi. Aenean interdum dictum turpis laoreet vestibulum.
Morbi scelerisque, eros auctor euismod consectetur, justo diam dapibus est, id placerat neque dui ut lorem. Fusce in orci egestas, semper libero id, porta tortor. Etiam nec quam et mauris commodo posuere. Duis gravida, libero nec hendrerit venenatis, lacus felis congue ante, eget rutrum justo turpis quis massa. Donec eget magna vitae dui consequat bibendum. Morbi porta dignissim urna, eget mattis lacus commodo vel. Nunc ligula ex, suscipit in accumsan ut, laoreet eu felis. Morbi sem felis, luctus at lorem a, lobortis vulputate nulla. Duis cursus mi eget arcu placerat consequat. Curabitur venenatis consectetur varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus id ex id commodo.
Donec pretium leo magna, eu viverra lacus vehicula quis. Vivamus vel risus in ligula tristique feugiat ac eu erat. Nulla commodo augue a tortor iaculis varius. Maecenas id facilisis libero. Sed semper, lorem at vulputate tristique, odio ipsum condimentum mi, a volutpat dolor nisi vel risus. Pellentesque at gravida nisi, in vehicula orci. Sed vestibulum aliquam vestibulum. Ut mattis ligula in dolor eleifend, id ultrices sapien lobortis. Suspendisse sed blandit augue. Phasellus et efficitur mauris. In ac urna auctor, hendrerit mauris sed, dictum tortor. Duis nec diam interdum, hendrerit nisi ac, interdum diam. Vivamus fringilla risus nec lacus ullamcorper rutrum. Proin ac pellentesque risus.
Nunc interdum pretium feugiat. Fusce id bibendum turpis, tincidunt iaculis neque. Vestibulum at enim lobortis, venenatis magna eget, commodo est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ipsum eget tellus efficitur auctor vitae eu augue. Etiam nec diam velit. Morbi vel pretium sapien. Suspendisse tempus faucibus orci, ut rutrum sem tincidunt a. Mauris at lorem tellus.
Nunc est velit, tristique suscipit interdum at, mollis non arcu. Sed imperdiet leo quis eleifend laoreet. Pellentesque dapibus at massa pulvinar eleifend. Suspendisse potenti. Etiam elementum placerat est nec dapibus. Nulla libero erat, mattis sed rutrum eget, molestie posuere nibh. Etiam in ex ut lorem auctor pretium. Curabitur eget scelerisque libero, a scelerisque libero. Fusce vel rutrum mauris, in elementum ligula. Vestibulum nisi lectus, blandit quis risus vitae, aliquet lobortis orci.
Pellentesque vel est vitae tellus porta sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vulputate eleifend pellentesque. Integer vel vehicula tellus. Etiam ut euismod orci, vel venenatis massa. Quisque sit amet ipsum vitae metus mollis cursus hendrerit at neque. Nunc cursus eu urna vitae efficitur. Praesent et accumsan felis. Integer maximus condimentum mi eget consequat. Nulla in nulla ullamcorper, vestibulum sem in, ultricies dolor. Vivamus eleifend auctor magna quis varius. Cras lacinia ornare volutpat. Proin porttitor lacus eget convallis mattis. Cras at urna libero. Donec est nisl, commodo in enim ut, dictum molestie neque.
Vivamus sit amet sagittis diam. Sed finibus laoreet lectus, eu rutrum tortor ullamcorper nec. Mauris finibus justo eu tellus pharetra, vel mollis diam venenatis. Aliquam hendrerit nec dolor eget blandit. Nullam id velit ac mauris malesuada dictum quis a dui. Proin nec molestie lectus. Aenean blandit tempus nisl eget scelerisque. Etiam aliquam lorem id quam pretium, quis ullamcorper ex finibus. Donec vulputate condimentum eleifend. Aenean ac consectetur sem. Aenean id eleifend diam. Suspendisse imperdiet sodales tincidunt.
Proin venenatis, tellus sed volutpat interdum, lacus mauris elementum nibh, id commodo lectus lorem vitae sem. Curabitur eget mauris massa. Curabitur viverra egestas consectetur. Donec enim ex, pharetra vitae justo nec, blandit accumsan ipsum. In ac mauris non magna imperdiet facilisis eu a leo. Nunc ipsum lacus, sollicitudin a ipsum non, commodo sagittis nibh. Cras pharetra vehicula enim at consequat.
Ut efficitur mollis erat a placerat. In feugiat mauris eu maximus tincidunt. Donec ut neque a erat vulputate aliquam in et elit. Sed eu est eu mauris rutrum auctor nec et odio. Etiam sapien purus, cursus et hendrerit vitae, fermentum non quam. Aenean a nibh eget tellus rutrum ornare. Etiam imperdiet massa convallis, commodo neque vel, tincidunt elit. Sed et varius turpis, vitae malesuada sem. Nam eu sollicitudin est. Phasellus semper sem at congue vestibulum. Phasellus nisi mi, facilisis vitae lorem et, placerat volutpat sem. Sed feugiat sapien malesuada purus sodales, sit amet faucibus dolor feugiat. Aenean nulla risus, elementum id magna a, pulvinar efficitur felis.
Proin imperdiet enim massa, at sollicitudin libero laoreet vel. Fusce euismod libero at aliquam commodo. Donec tempus enim a pretium consequat. Mauris nec fringilla purus. Aliquam in interdum augue, sed efficitur massa. Vivamus vel erat accumsan, rhoncus urna posuere, feugiat nibh. Sed efficitur magna neque, id tincidunt mauris iaculis sit amet. Nunc maximus auctor est, vitae tristique metus. Integer dapibus risus ligula, nec volutpat est maximus gravida. Praesent tempus consequat augue, et pharetra libero placerat eleifend. Curabitur congue dictum ipsum. In vitae lorem vitae orci vulputate molestie.
Mauris id elit accumsan, molestie elit et, mollis ipsum. Fusce dapibus nisi eget vestibulum pellentesque. Fusce vel tortor at mauris aliquet placerat eu non lacus. Sed vestibulum auctor ligula, sed posuere urna congue ut. Integer et molestie elit. Curabitur aliquam suscipit dui eu elementum. Fusce sollicitudin, sem ut finibus finibus, turpis enim efficitur urna, nec aliquam urna elit vitae justo. Morbi nec lectus neque. Integer aliquet est eget pharetra blandit. Maecenas tortor quam, porta vel egestas ac, consequat in lectus. Cras lacinia lectus tellus, quis varius metus molestie sed. Quisque gravida eleifend sem cursus tincidunt. Sed eget orci non nisi tempor tempus sit amet vel felis. Pellentesque quis ex sed mi ultricies tincidunt a eget velit. Phasellus finibus eget massa eleifend posuere.
Vestibulum pellentesque tellus vel bibendum eleifend. Phasellus vitae mauris leo. Nunc ut orci fringilla, maximus urna nec, cursus quam. Etiam egestas, tortor sit amet ornare dignissim, augue ante imperdiet metus, sed volutpat lacus orci congue felis. Etiam convallis mi quis ex laoreet tincidunt. Phasellus vitae turpis id magna posuere ornare. Duis et malesuada mauris, in ultricies nunc. Phasellus non felis mollis, pretium lectus id, sagittis nisi. Nullam volutpat leo ut turpis aliquet blandit. Quisque ut felis mi.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas hendrerit eros vel ipsum placerat maximus. Nunc sed vestibulum risus, quis porta est. Phasellus consequat fringilla quam, ac elementum ligula mollis a. Maecenas facilisis lectus et ornare sodales. Nullam sed rutrum urna, nec volutpat quam. Etiam iaculis a sapien eu euismod. Morbi tempus, ligula ac facilisis scelerisque, quam purus consectetur mauris, vitae iaculis quam purus ut felis. Suspendisse consectetur lobortis velit, sed ultricies purus. Curabitur erat leo, volutpat non dapibus id, pretium at lorem. Quisque accumsan purus sit amet volutpat dapibus. Vestibulum malesuada ipsum in ipsum consectetur blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in est tincidunt, lobortis odio et, ultrices ligula. Suspendisse tempus quis nisl in efficitur. Nunc in leo cursus, interdum sapien ut, porta est.
Morbi a arcu quis libero pretium lobortis. In nisl tortor, ullamcorper fermentum elit ut, vestibulum vestibulum tortor. Maecenas vitae libero a lorem commodo blandit eget id erat. Mauris ac ultrices dolor. Mauris volutpat magna sit amet diam consequat, in lacinia lorem iaculis. Phasellus et urna augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum at risus sit amet sem elementum efficitur in eu lectus. Curabitur at turpis at ante sagittis dapibus id nec turpis. Pellentesque placerat lectus eget mauris tincidunt, ut porta velit faucibus. Nunc sed malesuada ex, in mattis dolor. Nam ac purus laoreet, aliquet lorem quis, posuere libero. In suscipit est ornare congue auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec eleifend justo. Nam ut dapibus mi, quis scelerisque velit. Sed nec lectus egestas, sollicitudin ante ac, bibendum massa. Curabitur nec volutpat purus.
Cras sed ligula ut ipsum tincidunt mollis. Sed egestas tellus erat, vel porta nulla facilisis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor lorem et neque auctor euismod. Nam ac interdum turpis. Vivamus placerat ipsum nec nibh laoreet efficitur. Curabitur fringilla vestibulum nibh ut euismod. In suscipit rutrum aliquet. Vivamus non euismod velit, sit amet cursus elit. Cras ultricies velit sed tellus ullamcorper, eu auctor leo euismod. Donec at ultrices est. Cras mollis justo eu interdum suscipit.
Vivamus eleifend justo id diam posuere dictum. Aliquam posuere, orci dapibus lacinia eleifend, tellus neque consequat diam, eu laoreet sem lacus quis libero. Curabitur rhoncus at sem non feugiat. Maecenas blandit imperdiet leo sit amet euismod. Vivamus rutrum eleifend lectus sit amet pellentesque. Pellentesque sodales nunc a odio faucibus pretium gravida eu ligula. Suspendisse pharetra ipsum vel ultricies malesuada. Aenean eget lobortis justo, in posuere enim. Praesent rutrum porta metus, sollicitudin maximus risus semper eu. Sed volutpat tincidunt lectus, ac scelerisque massa rhoncus in. Mauris eget augue venenatis, ultricies turpis ac, finibus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lobortis vehicula dolor, vitae congue ligula ultrices id. Integer vitae lacus in mauris finibus varius nec sed est.
</div>
</div>
我认为这就是您所需要的。利用 css position
属性
.parent {
height: 200px;
background: red;
background-image: url('src-to-image');
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.5);
}
.overlay > img {
position: relative;
/**use top and left property to even cover more specify areas**/
display: inline-block;
/**set width, height property to specify coverage dimensions*/
}
<div class="parent">
<div class="overlay">
<img src="" alt="" />
</div>
</div>
您可以使用 display flex 实现此目的,请参见下面的代码
我将 parent 的背景图片移到了第 2 个间隔 children。徽标是中间的 child。我将垫片设置为 flex-grow: 1
,这样它们会扩大宽度。
您的徽标图片目前需要正确居中(编辑图片使其对称)
如果您想了解有关 flex 的更多信息,请阅读 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
header{
position: fixed
}
/*#masthead */
/*top: 25px;*/
#parent {
display: flex;
height: 151px;
width: 100%;
}
/*.header-wrap*/
#parent .child {
background: url('https://ladyfx.ae/wp-content/uploads/2018/03/menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
width: 553px;
}
#parent, #parent .child{
pointer-events: none;
}
#parent .child .container{
pointer-events: all;
}
.spacer {
background: url('https://ladyfx.ae/wp-content/uploads/2018/01/upper-menu-bg.png') repeat-x center 8px;
height: 151px;
background-attachment: fixed;
flex-grow: 1;
}
<div id="page" class="hfeed site">
<header id="parent" class="site-header" role="banner">
<div class="spacer">
</div>
<div class="child"><!-- .header-wrap -->
</div>
<div class="spacer">
</div>
</header><!-- #masthead -->
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dui in quam placerat aliquet. In semper lectus sed lectus iaculis blandit. Etiam egestas ex ac rhoncus commodo. Praesent sagittis eget ante nec interdum. Suspendisse tempus est ac libero rhoncus, laoreet pulvinar mi sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis tincidunt ipsum. Mauris nec arcu mollis, pellentesque nisi vitae, gravida sem. Duis vel velit vel lectus rhoncus luctus a vitae nulla. Nunc nec enim sapien. Quisque tempus dolor at viverra pharetra. Vivamus molestie bibendum sapien, vitae iaculis nisl fringilla euismod. Integer quis tincidunt ligula, at vulputate risus.
In vitae purus nec massa viverra mattis quis id lacus. Pellentesque cursus sapien nec tortor faucibus, sit amet sodales tortor faucibus. Aliquam pulvinar sollicitudin urna, ac suscipit sapien venenatis quis. Morbi eu risus in massa pretium molestie. Fusce rhoncus orci in ornare consectetur. Sed volutpat tristique nibh congue finibus. Integer semper sagittis sem vitae varius. Sed sit amet tellus in justo dictum fringilla. Pellentesque dignissim congue nulla non tincidunt. Etiam tempor ante metus, vel pretium est dapibus at.
Etiam eu consequat leo, sit amet placerat ex. Nullam sit amet lectus turpis. Curabitur ac euismod mauris, quis semper ex. Proin efficitur, odio nec tempus blandit, mauris nisl commodo turpis, a tempor lectus purus quis ex. Aliquam id ipsum risus. Mauris quis massa ut dui porttitor pharetra. Nulla aliquam tellus vitae odio rutrum efficitur. Vivamus accumsan iaculis augue, sit amet dignissim turpis aliquam sed.
Quisque finibus fringilla est vitae lobortis. Duis quis egestas nunc, vel ultricies velit. Sed blandit dolor erat, eu placerat tellus ornare dictum. Suspendisse suscipit, tortor ut auctor facilisis, lacus nisl tempor nunc, non mollis nibh velit ut elit. Duis vel laoreet quam, sit amet egestas diam. Fusce aliquam dignissim ante id bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus gravida, augue at consequat mattis, diam nisl porta enim, in gravida dui tortor et tortor. Phasellus elit lacus, luctus sit amet neque id, lobortis placerat est. Donec ac tristique mi. Nulla facilisi. Aenean interdum dictum turpis laoreet vestibulum.
Morbi scelerisque, eros auctor euismod consectetur, justo diam dapibus est, id placerat neque dui ut lorem. Fusce in orci egestas, semper libero id, porta tortor. Etiam nec quam et mauris commodo posuere. Duis gravida, libero nec hendrerit venenatis, lacus felis congue ante, eget rutrum justo turpis quis massa. Donec eget magna vitae dui consequat bibendum. Morbi porta dignissim urna, eget mattis lacus commodo vel. Nunc ligula ex, suscipit in accumsan ut, laoreet eu felis. Morbi sem felis, luctus at lorem a, lobortis vulputate nulla. Duis cursus mi eget arcu placerat consequat. Curabitur venenatis consectetur varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus id ex id commodo.
Donec pretium leo magna, eu viverra lacus vehicula quis. Vivamus vel risus in ligula tristique feugiat ac eu erat. Nulla commodo augue a tortor iaculis varius. Maecenas id facilisis libero. Sed semper, lorem at vulputate tristique, odio ipsum condimentum mi, a volutpat dolor nisi vel risus. Pellentesque at gravida nisi, in vehicula orci. Sed vestibulum aliquam vestibulum. Ut mattis ligula in dolor eleifend, id ultrices sapien lobortis. Suspendisse sed blandit augue. Phasellus et efficitur mauris. In ac urna auctor, hendrerit mauris sed, dictum tortor. Duis nec diam interdum, hendrerit nisi ac, interdum diam. Vivamus fringilla risus nec lacus ullamcorper rutrum. Proin ac pellentesque risus.
Nunc interdum pretium feugiat. Fusce id bibendum turpis, tincidunt iaculis neque. Vestibulum at enim lobortis, venenatis magna eget, commodo est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ipsum eget tellus efficitur auctor vitae eu augue. Etiam nec diam velit. Morbi vel pretium sapien. Suspendisse tempus faucibus orci, ut rutrum sem tincidunt a. Mauris at lorem tellus.
Nunc est velit, tristique suscipit interdum at, mollis non arcu. Sed imperdiet leo quis eleifend laoreet. Pellentesque dapibus at massa pulvinar eleifend. Suspendisse potenti. Etiam elementum placerat est nec dapibus. Nulla libero erat, mattis sed rutrum eget, molestie posuere nibh. Etiam in ex ut lorem auctor pretium. Curabitur eget scelerisque libero, a scelerisque libero. Fusce vel rutrum mauris, in elementum ligula. Vestibulum nisi lectus, blandit quis risus vitae, aliquet lobortis orci.
Pellentesque vel est vitae tellus porta sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vulputate eleifend pellentesque. Integer vel vehicula tellus. Etiam ut euismod orci, vel venenatis massa. Quisque sit amet ipsum vitae metus mollis cursus hendrerit at neque. Nunc cursus eu urna vitae efficitur. Praesent et accumsan felis. Integer maximus condimentum mi eget consequat. Nulla in nulla ullamcorper, vestibulum sem in, ultricies dolor. Vivamus eleifend auctor magna quis varius. Cras lacinia ornare volutpat. Proin porttitor lacus eget convallis mattis. Cras at urna libero. Donec est nisl, commodo in enim ut, dictum molestie neque.
Vivamus sit amet sagittis diam. Sed finibus laoreet lectus, eu rutrum tortor ullamcorper nec. Mauris finibus justo eu tellus pharetra, vel mollis diam venenatis. Aliquam hendrerit nec dolor eget blandit. Nullam id velit ac mauris malesuada dictum quis a dui. Proin nec molestie lectus. Aenean blandit tempus nisl eget scelerisque. Etiam aliquam lorem id quam pretium, quis ullamcorper ex finibus. Donec vulputate condimentum eleifend. Aenean ac consectetur sem. Aenean id eleifend diam. Suspendisse imperdiet sodales tincidunt.
Proin venenatis, tellus sed volutpat interdum, lacus mauris elementum nibh, id commodo lectus lorem vitae sem. Curabitur eget mauris massa. Curabitur viverra egestas consectetur. Donec enim ex, pharetra vitae justo nec, blandit accumsan ipsum. In ac mauris non magna imperdiet facilisis eu a leo. Nunc ipsum lacus, sollicitudin a ipsum non, commodo sagittis nibh. Cras pharetra vehicula enim at consequat.
Ut efficitur mollis erat a placerat. In feugiat mauris eu maximus tincidunt. Donec ut neque a erat vulputate aliquam in et elit. Sed eu est eu mauris rutrum auctor nec et odio. Etiam sapien purus, cursus et hendrerit vitae, fermentum non quam. Aenean a nibh eget tellus rutrum ornare. Etiam imperdiet massa convallis, commodo neque vel, tincidunt elit. Sed et varius turpis, vitae malesuada sem. Nam eu sollicitudin est. Phasellus semper sem at congue vestibulum. Phasellus nisi mi, facilisis vitae lorem et, placerat volutpat sem. Sed feugiat sapien malesuada purus sodales, sit amet faucibus dolor feugiat. Aenean nulla risus, elementum id magna a, pulvinar efficitur felis.
Proin imperdiet enim massa, at sollicitudin libero laoreet vel. Fusce euismod libero at aliquam commodo. Donec tempus enim a pretium consequat. Mauris nec fringilla purus. Aliquam in interdum augue, sed efficitur massa. Vivamus vel erat accumsan, rhoncus urna posuere, feugiat nibh. Sed efficitur magna neque, id tincidunt mauris iaculis sit amet. Nunc maximus auctor est, vitae tristique metus. Integer dapibus risus ligula, nec volutpat est maximus gravida. Praesent tempus consequat augue, et pharetra libero placerat eleifend. Curabitur congue dictum ipsum. In vitae lorem vitae orci vulputate molestie.
Mauris id elit accumsan, molestie elit et, mollis ipsum. Fusce dapibus nisi eget vestibulum pellentesque. Fusce vel tortor at mauris aliquet placerat eu non lacus. Sed vestibulum auctor ligula, sed posuere urna congue ut. Integer et molestie elit. Curabitur aliquam suscipit dui eu elementum. Fusce sollicitudin, sem ut finibus finibus, turpis enim efficitur urna, nec aliquam urna elit vitae justo. Morbi nec lectus neque. Integer aliquet est eget pharetra blandit. Maecenas tortor quam, porta vel egestas ac, consequat in lectus. Cras lacinia lectus tellus, quis varius metus molestie sed. Quisque gravida eleifend sem cursus tincidunt. Sed eget orci non nisi tempor tempus sit amet vel felis. Pellentesque quis ex sed mi ultricies tincidunt a eget velit. Phasellus finibus eget massa eleifend posuere.
Vestibulum pellentesque tellus vel bibendum eleifend. Phasellus vitae mauris leo. Nunc ut orci fringilla, maximus urna nec, cursus quam. Etiam egestas, tortor sit amet ornare dignissim, augue ante imperdiet metus, sed volutpat lacus orci congue felis. Etiam convallis mi quis ex laoreet tincidunt. Phasellus vitae turpis id magna posuere ornare. Duis et malesuada mauris, in ultricies nunc. Phasellus non felis mollis, pretium lectus id, sagittis nisi. Nullam volutpat leo ut turpis aliquet blandit. Quisque ut felis mi.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas hendrerit eros vel ipsum placerat maximus. Nunc sed vestibulum risus, quis porta est. Phasellus consequat fringilla quam, ac elementum ligula mollis a. Maecenas facilisis lectus et ornare sodales. Nullam sed rutrum urna, nec volutpat quam. Etiam iaculis a sapien eu euismod. Morbi tempus, ligula ac facilisis scelerisque, quam purus consectetur mauris, vitae iaculis quam purus ut felis. Suspendisse consectetur lobortis velit, sed ultricies purus. Curabitur erat leo, volutpat non dapibus id, pretium at lorem. Quisque accumsan purus sit amet volutpat dapibus. Vestibulum malesuada ipsum in ipsum consectetur blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in est tincidunt, lobortis odio et, ultrices ligula. Suspendisse tempus quis nisl in efficitur. Nunc in leo cursus, interdum sapien ut, porta est.
Morbi a arcu quis libero pretium lobortis. In nisl tortor, ullamcorper fermentum elit ut, vestibulum vestibulum tortor. Maecenas vitae libero a lorem commodo blandit eget id erat. Mauris ac ultrices dolor. Mauris volutpat magna sit amet diam consequat, in lacinia lorem iaculis. Phasellus et urna augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum at risus sit amet sem elementum efficitur in eu lectus. Curabitur at turpis at ante sagittis dapibus id nec turpis. Pellentesque placerat lectus eget mauris tincidunt, ut porta velit faucibus. Nunc sed malesuada ex, in mattis dolor. Nam ac purus laoreet, aliquet lorem quis, posuere libero. In suscipit est ornare congue auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec eleifend justo. Nam ut dapibus mi, quis scelerisque velit. Sed nec lectus egestas, sollicitudin ante ac, bibendum massa. Curabitur nec volutpat purus.
Cras sed ligula ut ipsum tincidunt mollis. Sed egestas tellus erat, vel porta nulla facilisis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor lorem et neque auctor euismod. Nam ac interdum turpis. Vivamus placerat ipsum nec nibh laoreet efficitur. Curabitur fringilla vestibulum nibh ut euismod. In suscipit rutrum aliquet. Vivamus non euismod velit, sit amet cursus elit. Cras ultricies velit sed tellus ullamcorper, eu auctor leo euismod. Donec at ultrices est. Cras mollis justo eu interdum suscipit.
Vivamus eleifend justo id diam posuere dictum. Aliquam posuere, orci dapibus lacinia eleifend, tellus neque consequat diam, eu laoreet sem lacus quis libero. Curabitur rhoncus at sem non feugiat. Maecenas blandit imperdiet leo sit amet euismod. Vivamus rutrum eleifend lectus sit amet pellentesque. Pellentesque sodales nunc a odio faucibus pretium gravida eu ligula. Suspendisse pharetra ipsum vel ultricies malesuada. Aenean eget lobortis justo, in posuere enim. Praesent rutrum porta metus, sollicitudin maximus risus semper eu. Sed volutpat tincidunt lectus, ac scelerisque massa rhoncus in. Mauris eget augue venenatis, ultricies turpis ac, finibus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lobortis vehicula dolor, vitae congue ligula ultrices id. Integer vitae lacus in mauris finibus varius nec sed est.
</div>
</div>
parent 中有一个连续的背景图块,例如:
#parent{
background: url('tile-bg-under-menu.png') repeat-x center 32px;
height: 151px;
width: 100%;
background-attachment: fixed;
}
然后,我有 child,它位于 parent 之上,还有另一张图片,如下所示:
#parent .child {
background: url('menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
margin-top: -20px;
}
所以,我想 hide
#parent
div 的宽度和高度在 .child
div 后面的确切部分#parent
div。
我正在寻找类似 clip
的逆函数或任何可以相同工作的东西(用 child 掩盖 parent)。
提问原因:
我问这个的原因是因为:.child
div 有一个半反式 parent 背景,有一部分重叠 #parent
"horizontal tile" 这也是半反式 parent;因此,当他们相遇时,他们的 semitransparent 部分 cover/intersect 每个都在那个部分,这是丑陋的,而且这不是图形计划的一部分。
编辑:我不能使用 jpg,因为 div 浮在 "dynamic" 内容之上。
我试过:
- 制作
::before
和::after
work-around,在它们之外,但是 我无法获取内容(背景图块)到达浏览器的末端 window。 - 制作一个宽度为 4k 的 png,并且正好在
.child
所在的部分为空。这并不像听起来那么糟糕,但是根据不同的浏览器,像素会向左或向右移动。
解决方案可以是 CSS 或 JavaScript - 没关系。
似乎没有等同于逆剪裁的方法:Is there an inverse to the CSS "Clip" property; hide the clipped area?
澄清:
div 部分看起来像这样:
[(#parent
)平铺部分]{[-这里曲线向下.child
重叠部分]这里曲线向上-}[(#parent
)平铺部分]
演示 fiddle:https://jsfiddle.net/iorgu/13k2hn9y/ 片段:
header{
position: fixed
}
/*#masthead */
/*top: 25px;*/
#parent {
background: url('https://ladyfx.ae/wp-content/uploads/2018/01/upper-menu-bg.png') repeat-x center 8px;
height: 151px;
width: 100%;
background-attachment: fixed;
}
/*.header-wrap*/
#parent .child {
background: url('https://ladyfx.ae/wp-content/uploads/2018/03/menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
}
#parent, #parent .child{
pointer-events: none;
}
#parent .child .container{
pointer-events: all;
}
<div id="page" class="hfeed site">
<header id="parent" class="site-header" role="banner">
<div class="child"><!-- .header-wrap -->
</div>
</header><!-- #masthead -->
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dui in quam placerat aliquet. In semper lectus sed lectus iaculis blandit. Etiam egestas ex ac rhoncus commodo. Praesent sagittis eget ante nec interdum. Suspendisse tempus est ac libero rhoncus, laoreet pulvinar mi sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis tincidunt ipsum. Mauris nec arcu mollis, pellentesque nisi vitae, gravida sem. Duis vel velit vel lectus rhoncus luctus a vitae nulla. Nunc nec enim sapien. Quisque tempus dolor at viverra pharetra. Vivamus molestie bibendum sapien, vitae iaculis nisl fringilla euismod. Integer quis tincidunt ligula, at vulputate risus.
In vitae purus nec massa viverra mattis quis id lacus. Pellentesque cursus sapien nec tortor faucibus, sit amet sodales tortor faucibus. Aliquam pulvinar sollicitudin urna, ac suscipit sapien venenatis quis. Morbi eu risus in massa pretium molestie. Fusce rhoncus orci in ornare consectetur. Sed volutpat tristique nibh congue finibus. Integer semper sagittis sem vitae varius. Sed sit amet tellus in justo dictum fringilla. Pellentesque dignissim congue nulla non tincidunt. Etiam tempor ante metus, vel pretium est dapibus at.
Etiam eu consequat leo, sit amet placerat ex. Nullam sit amet lectus turpis. Curabitur ac euismod mauris, quis semper ex. Proin efficitur, odio nec tempus blandit, mauris nisl commodo turpis, a tempor lectus purus quis ex. Aliquam id ipsum risus. Mauris quis massa ut dui porttitor pharetra. Nulla aliquam tellus vitae odio rutrum efficitur. Vivamus accumsan iaculis augue, sit amet dignissim turpis aliquam sed.
Quisque finibus fringilla est vitae lobortis. Duis quis egestas nunc, vel ultricies velit. Sed blandit dolor erat, eu placerat tellus ornare dictum. Suspendisse suscipit, tortor ut auctor facilisis, lacus nisl tempor nunc, non mollis nibh velit ut elit. Duis vel laoreet quam, sit amet egestas diam. Fusce aliquam dignissim ante id bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus gravida, augue at consequat mattis, diam nisl porta enim, in gravida dui tortor et tortor. Phasellus elit lacus, luctus sit amet neque id, lobortis placerat est. Donec ac tristique mi. Nulla facilisi. Aenean interdum dictum turpis laoreet vestibulum.
Morbi scelerisque, eros auctor euismod consectetur, justo diam dapibus est, id placerat neque dui ut lorem. Fusce in orci egestas, semper libero id, porta tortor. Etiam nec quam et mauris commodo posuere. Duis gravida, libero nec hendrerit venenatis, lacus felis congue ante, eget rutrum justo turpis quis massa. Donec eget magna vitae dui consequat bibendum. Morbi porta dignissim urna, eget mattis lacus commodo vel. Nunc ligula ex, suscipit in accumsan ut, laoreet eu felis. Morbi sem felis, luctus at lorem a, lobortis vulputate nulla. Duis cursus mi eget arcu placerat consequat. Curabitur venenatis consectetur varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus id ex id commodo.
Donec pretium leo magna, eu viverra lacus vehicula quis. Vivamus vel risus in ligula tristique feugiat ac eu erat. Nulla commodo augue a tortor iaculis varius. Maecenas id facilisis libero. Sed semper, lorem at vulputate tristique, odio ipsum condimentum mi, a volutpat dolor nisi vel risus. Pellentesque at gravida nisi, in vehicula orci. Sed vestibulum aliquam vestibulum. Ut mattis ligula in dolor eleifend, id ultrices sapien lobortis. Suspendisse sed blandit augue. Phasellus et efficitur mauris. In ac urna auctor, hendrerit mauris sed, dictum tortor. Duis nec diam interdum, hendrerit nisi ac, interdum diam. Vivamus fringilla risus nec lacus ullamcorper rutrum. Proin ac pellentesque risus.
Nunc interdum pretium feugiat. Fusce id bibendum turpis, tincidunt iaculis neque. Vestibulum at enim lobortis, venenatis magna eget, commodo est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ipsum eget tellus efficitur auctor vitae eu augue. Etiam nec diam velit. Morbi vel pretium sapien. Suspendisse tempus faucibus orci, ut rutrum sem tincidunt a. Mauris at lorem tellus.
Nunc est velit, tristique suscipit interdum at, mollis non arcu. Sed imperdiet leo quis eleifend laoreet. Pellentesque dapibus at massa pulvinar eleifend. Suspendisse potenti. Etiam elementum placerat est nec dapibus. Nulla libero erat, mattis sed rutrum eget, molestie posuere nibh. Etiam in ex ut lorem auctor pretium. Curabitur eget scelerisque libero, a scelerisque libero. Fusce vel rutrum mauris, in elementum ligula. Vestibulum nisi lectus, blandit quis risus vitae, aliquet lobortis orci.
Pellentesque vel est vitae tellus porta sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vulputate eleifend pellentesque. Integer vel vehicula tellus. Etiam ut euismod orci, vel venenatis massa. Quisque sit amet ipsum vitae metus mollis cursus hendrerit at neque. Nunc cursus eu urna vitae efficitur. Praesent et accumsan felis. Integer maximus condimentum mi eget consequat. Nulla in nulla ullamcorper, vestibulum sem in, ultricies dolor. Vivamus eleifend auctor magna quis varius. Cras lacinia ornare volutpat. Proin porttitor lacus eget convallis mattis. Cras at urna libero. Donec est nisl, commodo in enim ut, dictum molestie neque.
Vivamus sit amet sagittis diam. Sed finibus laoreet lectus, eu rutrum tortor ullamcorper nec. Mauris finibus justo eu tellus pharetra, vel mollis diam venenatis. Aliquam hendrerit nec dolor eget blandit. Nullam id velit ac mauris malesuada dictum quis a dui. Proin nec molestie lectus. Aenean blandit tempus nisl eget scelerisque. Etiam aliquam lorem id quam pretium, quis ullamcorper ex finibus. Donec vulputate condimentum eleifend. Aenean ac consectetur sem. Aenean id eleifend diam. Suspendisse imperdiet sodales tincidunt.
Proin venenatis, tellus sed volutpat interdum, lacus mauris elementum nibh, id commodo lectus lorem vitae sem. Curabitur eget mauris massa. Curabitur viverra egestas consectetur. Donec enim ex, pharetra vitae justo nec, blandit accumsan ipsum. In ac mauris non magna imperdiet facilisis eu a leo. Nunc ipsum lacus, sollicitudin a ipsum non, commodo sagittis nibh. Cras pharetra vehicula enim at consequat.
Ut efficitur mollis erat a placerat. In feugiat mauris eu maximus tincidunt. Donec ut neque a erat vulputate aliquam in et elit. Sed eu est eu mauris rutrum auctor nec et odio. Etiam sapien purus, cursus et hendrerit vitae, fermentum non quam. Aenean a nibh eget tellus rutrum ornare. Etiam imperdiet massa convallis, commodo neque vel, tincidunt elit. Sed et varius turpis, vitae malesuada sem. Nam eu sollicitudin est. Phasellus semper sem at congue vestibulum. Phasellus nisi mi, facilisis vitae lorem et, placerat volutpat sem. Sed feugiat sapien malesuada purus sodales, sit amet faucibus dolor feugiat. Aenean nulla risus, elementum id magna a, pulvinar efficitur felis.
Proin imperdiet enim massa, at sollicitudin libero laoreet vel. Fusce euismod libero at aliquam commodo. Donec tempus enim a pretium consequat. Mauris nec fringilla purus. Aliquam in interdum augue, sed efficitur massa. Vivamus vel erat accumsan, rhoncus urna posuere, feugiat nibh. Sed efficitur magna neque, id tincidunt mauris iaculis sit amet. Nunc maximus auctor est, vitae tristique metus. Integer dapibus risus ligula, nec volutpat est maximus gravida. Praesent tempus consequat augue, et pharetra libero placerat eleifend. Curabitur congue dictum ipsum. In vitae lorem vitae orci vulputate molestie.
Mauris id elit accumsan, molestie elit et, mollis ipsum. Fusce dapibus nisi eget vestibulum pellentesque. Fusce vel tortor at mauris aliquet placerat eu non lacus. Sed vestibulum auctor ligula, sed posuere urna congue ut. Integer et molestie elit. Curabitur aliquam suscipit dui eu elementum. Fusce sollicitudin, sem ut finibus finibus, turpis enim efficitur urna, nec aliquam urna elit vitae justo. Morbi nec lectus neque. Integer aliquet est eget pharetra blandit. Maecenas tortor quam, porta vel egestas ac, consequat in lectus. Cras lacinia lectus tellus, quis varius metus molestie sed. Quisque gravida eleifend sem cursus tincidunt. Sed eget orci non nisi tempor tempus sit amet vel felis. Pellentesque quis ex sed mi ultricies tincidunt a eget velit. Phasellus finibus eget massa eleifend posuere.
Vestibulum pellentesque tellus vel bibendum eleifend. Phasellus vitae mauris leo. Nunc ut orci fringilla, maximus urna nec, cursus quam. Etiam egestas, tortor sit amet ornare dignissim, augue ante imperdiet metus, sed volutpat lacus orci congue felis. Etiam convallis mi quis ex laoreet tincidunt. Phasellus vitae turpis id magna posuere ornare. Duis et malesuada mauris, in ultricies nunc. Phasellus non felis mollis, pretium lectus id, sagittis nisi. Nullam volutpat leo ut turpis aliquet blandit. Quisque ut felis mi.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas hendrerit eros vel ipsum placerat maximus. Nunc sed vestibulum risus, quis porta est. Phasellus consequat fringilla quam, ac elementum ligula mollis a. Maecenas facilisis lectus et ornare sodales. Nullam sed rutrum urna, nec volutpat quam. Etiam iaculis a sapien eu euismod. Morbi tempus, ligula ac facilisis scelerisque, quam purus consectetur mauris, vitae iaculis quam purus ut felis. Suspendisse consectetur lobortis velit, sed ultricies purus. Curabitur erat leo, volutpat non dapibus id, pretium at lorem. Quisque accumsan purus sit amet volutpat dapibus. Vestibulum malesuada ipsum in ipsum consectetur blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in est tincidunt, lobortis odio et, ultrices ligula. Suspendisse tempus quis nisl in efficitur. Nunc in leo cursus, interdum sapien ut, porta est.
Morbi a arcu quis libero pretium lobortis. In nisl tortor, ullamcorper fermentum elit ut, vestibulum vestibulum tortor. Maecenas vitae libero a lorem commodo blandit eget id erat. Mauris ac ultrices dolor. Mauris volutpat magna sit amet diam consequat, in lacinia lorem iaculis. Phasellus et urna augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum at risus sit amet sem elementum efficitur in eu lectus. Curabitur at turpis at ante sagittis dapibus id nec turpis. Pellentesque placerat lectus eget mauris tincidunt, ut porta velit faucibus. Nunc sed malesuada ex, in mattis dolor. Nam ac purus laoreet, aliquet lorem quis, posuere libero. In suscipit est ornare congue auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec eleifend justo. Nam ut dapibus mi, quis scelerisque velit. Sed nec lectus egestas, sollicitudin ante ac, bibendum massa. Curabitur nec volutpat purus.
Cras sed ligula ut ipsum tincidunt mollis. Sed egestas tellus erat, vel porta nulla facilisis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor lorem et neque auctor euismod. Nam ac interdum turpis. Vivamus placerat ipsum nec nibh laoreet efficitur. Curabitur fringilla vestibulum nibh ut euismod. In suscipit rutrum aliquet. Vivamus non euismod velit, sit amet cursus elit. Cras ultricies velit sed tellus ullamcorper, eu auctor leo euismod. Donec at ultrices est. Cras mollis justo eu interdum suscipit.
Vivamus eleifend justo id diam posuere dictum. Aliquam posuere, orci dapibus lacinia eleifend, tellus neque consequat diam, eu laoreet sem lacus quis libero. Curabitur rhoncus at sem non feugiat. Maecenas blandit imperdiet leo sit amet euismod. Vivamus rutrum eleifend lectus sit amet pellentesque. Pellentesque sodales nunc a odio faucibus pretium gravida eu ligula. Suspendisse pharetra ipsum vel ultricies malesuada. Aenean eget lobortis justo, in posuere enim. Praesent rutrum porta metus, sollicitudin maximus risus semper eu. Sed volutpat tincidunt lectus, ac scelerisque massa rhoncus in. Mauris eget augue venenatis, ultricies turpis ac, finibus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lobortis vehicula dolor, vitae congue ligula ultrices id. Integer vitae lacus in mauris finibus varius nec sed est.
</div>
</div>
我认为这就是您所需要的。利用 css position
属性
.parent {
height: 200px;
background: red;
background-image: url('src-to-image');
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.5);
}
.overlay > img {
position: relative;
/**use top and left property to even cover more specify areas**/
display: inline-block;
/**set width, height property to specify coverage dimensions*/
}
<div class="parent">
<div class="overlay">
<img src="" alt="" />
</div>
</div>
您可以使用 display flex 实现此目的,请参见下面的代码
我将 parent 的背景图片移到了第 2 个间隔 children。徽标是中间的 child。我将垫片设置为 flex-grow: 1
,这样它们会扩大宽度。
您的徽标图片目前需要正确居中(编辑图片使其对称)
如果您想了解有关 flex 的更多信息,请阅读 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
header{
position: fixed
}
/*#masthead */
/*top: 25px;*/
#parent {
display: flex;
height: 151px;
width: 100%;
}
/*.header-wrap*/
#parent .child {
background: url('https://ladyfx.ae/wp-content/uploads/2018/03/menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
width: 553px;
}
#parent, #parent .child{
pointer-events: none;
}
#parent .child .container{
pointer-events: all;
}
.spacer {
background: url('https://ladyfx.ae/wp-content/uploads/2018/01/upper-menu-bg.png') repeat-x center 8px;
height: 151px;
background-attachment: fixed;
flex-grow: 1;
}
<div id="page" class="hfeed site">
<header id="parent" class="site-header" role="banner">
<div class="spacer">
</div>
<div class="child"><!-- .header-wrap -->
</div>
<div class="spacer">
</div>
</header><!-- #masthead -->
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dui in quam placerat aliquet. In semper lectus sed lectus iaculis blandit. Etiam egestas ex ac rhoncus commodo. Praesent sagittis eget ante nec interdum. Suspendisse tempus est ac libero rhoncus, laoreet pulvinar mi sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis tincidunt ipsum. Mauris nec arcu mollis, pellentesque nisi vitae, gravida sem. Duis vel velit vel lectus rhoncus luctus a vitae nulla. Nunc nec enim sapien. Quisque tempus dolor at viverra pharetra. Vivamus molestie bibendum sapien, vitae iaculis nisl fringilla euismod. Integer quis tincidunt ligula, at vulputate risus.
In vitae purus nec massa viverra mattis quis id lacus. Pellentesque cursus sapien nec tortor faucibus, sit amet sodales tortor faucibus. Aliquam pulvinar sollicitudin urna, ac suscipit sapien venenatis quis. Morbi eu risus in massa pretium molestie. Fusce rhoncus orci in ornare consectetur. Sed volutpat tristique nibh congue finibus. Integer semper sagittis sem vitae varius. Sed sit amet tellus in justo dictum fringilla. Pellentesque dignissim congue nulla non tincidunt. Etiam tempor ante metus, vel pretium est dapibus at.
Etiam eu consequat leo, sit amet placerat ex. Nullam sit amet lectus turpis. Curabitur ac euismod mauris, quis semper ex. Proin efficitur, odio nec tempus blandit, mauris nisl commodo turpis, a tempor lectus purus quis ex. Aliquam id ipsum risus. Mauris quis massa ut dui porttitor pharetra. Nulla aliquam tellus vitae odio rutrum efficitur. Vivamus accumsan iaculis augue, sit amet dignissim turpis aliquam sed.
Quisque finibus fringilla est vitae lobortis. Duis quis egestas nunc, vel ultricies velit. Sed blandit dolor erat, eu placerat tellus ornare dictum. Suspendisse suscipit, tortor ut auctor facilisis, lacus nisl tempor nunc, non mollis nibh velit ut elit. Duis vel laoreet quam, sit amet egestas diam. Fusce aliquam dignissim ante id bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus gravida, augue at consequat mattis, diam nisl porta enim, in gravida dui tortor et tortor. Phasellus elit lacus, luctus sit amet neque id, lobortis placerat est. Donec ac tristique mi. Nulla facilisi. Aenean interdum dictum turpis laoreet vestibulum.
Morbi scelerisque, eros auctor euismod consectetur, justo diam dapibus est, id placerat neque dui ut lorem. Fusce in orci egestas, semper libero id, porta tortor. Etiam nec quam et mauris commodo posuere. Duis gravida, libero nec hendrerit venenatis, lacus felis congue ante, eget rutrum justo turpis quis massa. Donec eget magna vitae dui consequat bibendum. Morbi porta dignissim urna, eget mattis lacus commodo vel. Nunc ligula ex, suscipit in accumsan ut, laoreet eu felis. Morbi sem felis, luctus at lorem a, lobortis vulputate nulla. Duis cursus mi eget arcu placerat consequat. Curabitur venenatis consectetur varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus id ex id commodo.
Donec pretium leo magna, eu viverra lacus vehicula quis. Vivamus vel risus in ligula tristique feugiat ac eu erat. Nulla commodo augue a tortor iaculis varius. Maecenas id facilisis libero. Sed semper, lorem at vulputate tristique, odio ipsum condimentum mi, a volutpat dolor nisi vel risus. Pellentesque at gravida nisi, in vehicula orci. Sed vestibulum aliquam vestibulum. Ut mattis ligula in dolor eleifend, id ultrices sapien lobortis. Suspendisse sed blandit augue. Phasellus et efficitur mauris. In ac urna auctor, hendrerit mauris sed, dictum tortor. Duis nec diam interdum, hendrerit nisi ac, interdum diam. Vivamus fringilla risus nec lacus ullamcorper rutrum. Proin ac pellentesque risus.
Nunc interdum pretium feugiat. Fusce id bibendum turpis, tincidunt iaculis neque. Vestibulum at enim lobortis, venenatis magna eget, commodo est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ipsum eget tellus efficitur auctor vitae eu augue. Etiam nec diam velit. Morbi vel pretium sapien. Suspendisse tempus faucibus orci, ut rutrum sem tincidunt a. Mauris at lorem tellus.
Nunc est velit, tristique suscipit interdum at, mollis non arcu. Sed imperdiet leo quis eleifend laoreet. Pellentesque dapibus at massa pulvinar eleifend. Suspendisse potenti. Etiam elementum placerat est nec dapibus. Nulla libero erat, mattis sed rutrum eget, molestie posuere nibh. Etiam in ex ut lorem auctor pretium. Curabitur eget scelerisque libero, a scelerisque libero. Fusce vel rutrum mauris, in elementum ligula. Vestibulum nisi lectus, blandit quis risus vitae, aliquet lobortis orci.
Pellentesque vel est vitae tellus porta sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vulputate eleifend pellentesque. Integer vel vehicula tellus. Etiam ut euismod orci, vel venenatis massa. Quisque sit amet ipsum vitae metus mollis cursus hendrerit at neque. Nunc cursus eu urna vitae efficitur. Praesent et accumsan felis. Integer maximus condimentum mi eget consequat. Nulla in nulla ullamcorper, vestibulum sem in, ultricies dolor. Vivamus eleifend auctor magna quis varius. Cras lacinia ornare volutpat. Proin porttitor lacus eget convallis mattis. Cras at urna libero. Donec est nisl, commodo in enim ut, dictum molestie neque.
Vivamus sit amet sagittis diam. Sed finibus laoreet lectus, eu rutrum tortor ullamcorper nec. Mauris finibus justo eu tellus pharetra, vel mollis diam venenatis. Aliquam hendrerit nec dolor eget blandit. Nullam id velit ac mauris malesuada dictum quis a dui. Proin nec molestie lectus. Aenean blandit tempus nisl eget scelerisque. Etiam aliquam lorem id quam pretium, quis ullamcorper ex finibus. Donec vulputate condimentum eleifend. Aenean ac consectetur sem. Aenean id eleifend diam. Suspendisse imperdiet sodales tincidunt.
Proin venenatis, tellus sed volutpat interdum, lacus mauris elementum nibh, id commodo lectus lorem vitae sem. Curabitur eget mauris massa. Curabitur viverra egestas consectetur. Donec enim ex, pharetra vitae justo nec, blandit accumsan ipsum. In ac mauris non magna imperdiet facilisis eu a leo. Nunc ipsum lacus, sollicitudin a ipsum non, commodo sagittis nibh. Cras pharetra vehicula enim at consequat.
Ut efficitur mollis erat a placerat. In feugiat mauris eu maximus tincidunt. Donec ut neque a erat vulputate aliquam in et elit. Sed eu est eu mauris rutrum auctor nec et odio. Etiam sapien purus, cursus et hendrerit vitae, fermentum non quam. Aenean a nibh eget tellus rutrum ornare. Etiam imperdiet massa convallis, commodo neque vel, tincidunt elit. Sed et varius turpis, vitae malesuada sem. Nam eu sollicitudin est. Phasellus semper sem at congue vestibulum. Phasellus nisi mi, facilisis vitae lorem et, placerat volutpat sem. Sed feugiat sapien malesuada purus sodales, sit amet faucibus dolor feugiat. Aenean nulla risus, elementum id magna a, pulvinar efficitur felis.
Proin imperdiet enim massa, at sollicitudin libero laoreet vel. Fusce euismod libero at aliquam commodo. Donec tempus enim a pretium consequat. Mauris nec fringilla purus. Aliquam in interdum augue, sed efficitur massa. Vivamus vel erat accumsan, rhoncus urna posuere, feugiat nibh. Sed efficitur magna neque, id tincidunt mauris iaculis sit amet. Nunc maximus auctor est, vitae tristique metus. Integer dapibus risus ligula, nec volutpat est maximus gravida. Praesent tempus consequat augue, et pharetra libero placerat eleifend. Curabitur congue dictum ipsum. In vitae lorem vitae orci vulputate molestie.
Mauris id elit accumsan, molestie elit et, mollis ipsum. Fusce dapibus nisi eget vestibulum pellentesque. Fusce vel tortor at mauris aliquet placerat eu non lacus. Sed vestibulum auctor ligula, sed posuere urna congue ut. Integer et molestie elit. Curabitur aliquam suscipit dui eu elementum. Fusce sollicitudin, sem ut finibus finibus, turpis enim efficitur urna, nec aliquam urna elit vitae justo. Morbi nec lectus neque. Integer aliquet est eget pharetra blandit. Maecenas tortor quam, porta vel egestas ac, consequat in lectus. Cras lacinia lectus tellus, quis varius metus molestie sed. Quisque gravida eleifend sem cursus tincidunt. Sed eget orci non nisi tempor tempus sit amet vel felis. Pellentesque quis ex sed mi ultricies tincidunt a eget velit. Phasellus finibus eget massa eleifend posuere.
Vestibulum pellentesque tellus vel bibendum eleifend. Phasellus vitae mauris leo. Nunc ut orci fringilla, maximus urna nec, cursus quam. Etiam egestas, tortor sit amet ornare dignissim, augue ante imperdiet metus, sed volutpat lacus orci congue felis. Etiam convallis mi quis ex laoreet tincidunt. Phasellus vitae turpis id magna posuere ornare. Duis et malesuada mauris, in ultricies nunc. Phasellus non felis mollis, pretium lectus id, sagittis nisi. Nullam volutpat leo ut turpis aliquet blandit. Quisque ut felis mi.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas hendrerit eros vel ipsum placerat maximus. Nunc sed vestibulum risus, quis porta est. Phasellus consequat fringilla quam, ac elementum ligula mollis a. Maecenas facilisis lectus et ornare sodales. Nullam sed rutrum urna, nec volutpat quam. Etiam iaculis a sapien eu euismod. Morbi tempus, ligula ac facilisis scelerisque, quam purus consectetur mauris, vitae iaculis quam purus ut felis. Suspendisse consectetur lobortis velit, sed ultricies purus. Curabitur erat leo, volutpat non dapibus id, pretium at lorem. Quisque accumsan purus sit amet volutpat dapibus. Vestibulum malesuada ipsum in ipsum consectetur blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in est tincidunt, lobortis odio et, ultrices ligula. Suspendisse tempus quis nisl in efficitur. Nunc in leo cursus, interdum sapien ut, porta est.
Morbi a arcu quis libero pretium lobortis. In nisl tortor, ullamcorper fermentum elit ut, vestibulum vestibulum tortor. Maecenas vitae libero a lorem commodo blandit eget id erat. Mauris ac ultrices dolor. Mauris volutpat magna sit amet diam consequat, in lacinia lorem iaculis. Phasellus et urna augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum at risus sit amet sem elementum efficitur in eu lectus. Curabitur at turpis at ante sagittis dapibus id nec turpis. Pellentesque placerat lectus eget mauris tincidunt, ut porta velit faucibus. Nunc sed malesuada ex, in mattis dolor. Nam ac purus laoreet, aliquet lorem quis, posuere libero. In suscipit est ornare congue auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec eleifend justo. Nam ut dapibus mi, quis scelerisque velit. Sed nec lectus egestas, sollicitudin ante ac, bibendum massa. Curabitur nec volutpat purus.
Cras sed ligula ut ipsum tincidunt mollis. Sed egestas tellus erat, vel porta nulla facilisis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor lorem et neque auctor euismod. Nam ac interdum turpis. Vivamus placerat ipsum nec nibh laoreet efficitur. Curabitur fringilla vestibulum nibh ut euismod. In suscipit rutrum aliquet. Vivamus non euismod velit, sit amet cursus elit. Cras ultricies velit sed tellus ullamcorper, eu auctor leo euismod. Donec at ultrices est. Cras mollis justo eu interdum suscipit.
Vivamus eleifend justo id diam posuere dictum. Aliquam posuere, orci dapibus lacinia eleifend, tellus neque consequat diam, eu laoreet sem lacus quis libero. Curabitur rhoncus at sem non feugiat. Maecenas blandit imperdiet leo sit amet euismod. Vivamus rutrum eleifend lectus sit amet pellentesque. Pellentesque sodales nunc a odio faucibus pretium gravida eu ligula. Suspendisse pharetra ipsum vel ultricies malesuada. Aenean eget lobortis justo, in posuere enim. Praesent rutrum porta metus, sollicitudin maximus risus semper eu. Sed volutpat tincidunt lectus, ac scelerisque massa rhoncus in. Mauris eget augue venenatis, ultricies turpis ac, finibus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lobortis vehicula dolor, vitae congue ligula ultrices id. Integer vitae lacus in mauris finibus varius nec sed est.
</div>
</div>