Element::after - 叠加

Question

我目前正在尝试一些事情。我想使用 parent-div 的 pseudo-element 创建部分覆盖。这不是问题。我解决了它，但问题是 pseudo-element 也在 header.

下面的部分

只需跟随link，即可到达我的

    codepen.io/enrico1337/pen/xaeZMP

如果有人有解决方案，我将不胜感激，这样叠加层仅在 header 内部可见并且不会过度。

Answer 1

如果您不希望内容流过下一部分，您可以在 header 上使用 overflow: hidden。

Content is clipped if necessary to fit the padding box. No scrollbars are provided. scroll

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>

如果您希望其中的内容相对于 header 进行定位，请将 position: relative 添加到您的 header。

Element::after - 叠加

Element::after - Overlay

css

overlay

pseudo-element