Question

我正在尝试某些东西。我想使用parent-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内的内容相对于标题放置，还可以在标题中放置{{1}}。

元素：：之后-覆盖

1 个答案: