元素::之后 - 覆盖

Question

>我目前正在尝试一些东西。我想使用父div 的伪元素创建一个部分覆盖。这不是问题所在。我解决了它，但问题是，伪元素也在标题下方的部分上。

只需点击链接，即可访问我的

codepen.io/enrico1337/pen/xaeZMP

如果有人有一个解决方案，我将不胜感激，这样叠加层仅在标题内可见并且不会超调。

Answer 1

如果您不希望内容在下一节中流动，则可以在标题上使用overflow: hidden。

如有必要，将剪裁内容以适合填充框。不提供滚动条。 滚动

body {
font-family: 'Montserrat';
color: #ffffff;
}
header {
padding: 7em;
background-image: url("https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81a5f1725ca68c549e0054dcfdf269de&auto=format&fit=crop&w=1950&q=80");
background-size: cover;
background-repeat: no-repeat;
height: calc(100vh - 14em);
position: relative;
overflow: hidden;
}
header:after {
content: "";
background-color: black;
position: absolute;
height: 100vh;
width: 100%;
top: 0;
left: 0;
opacity: .8;
-webkit-transform: skew(0, -7deg) translateY(380px);
transform: skew(0, -7deg) translateY(380px);
}
header h1 {
font-size: 5.5em;
position: absolute;
}
header p {
font-size: 1.7em;
position: absolute;
padding-right: 16em;
padding-bottom: 2em;
line-height: 1.7;
z-index: 1;
bottom: 0;
}
#wrapper {
z-index: 1000;
}
#wrapper p {
font-size: 1.8em;
padding-right: 16em;
line-height: 1.7;
}
#wrapper section {
padding: 9em 7em;
color: #000000;
background-color: #ffffff;
background-size: cover;
background-repeat: no-repeat;
width: calc(100% - 14em);
}

<header>
<h1>Awesome Landscapes</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</header>
<div id="wrapper">
<section>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
</div>

position: relative如果您希望标题中的内容相对于标题定位，也可以将其放在标题中。