时间戳

首页 > 解决方案 > Element::after - 叠加

css - Element::after - 叠加

问题描述

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

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

    codepen.io/enrico1337/pen/xaeZMP

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

标签： cssoverlaypseudo-element

解决方案

如果您不希望内容流过下一部分，您可以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如果您希望其中的内容相对于标题定位，也可以放在您的标题中。

推荐阅读