Элемент :: после - Наложение - PullRequest
Новая
       8

Элемент :: после - Наложение

0 голосов
/ 22 сентября 2018

Я сейчас что-то пробую.Я хотел бы создать частичное наложение, используя псевдоэлемент parent-div.Это не проблема.Я решил это, но дело в том, что псевдоэлемент также находится над разделом под заголовком.

Просто перейдите по ссылке, чтобы добраться до моего 

    codepen.io/enrico1337/pen/xaeZMP

Я бы действительноцените это, если у кого-то есть решение, так что оверлей виден только внутри заголовка и не выходит за рамки.

1 Ответ

0 голосов
/ 22 сентября 2018

Если вы не хотите, чтобы содержимое проходило по следующему разделу, вы можете использовать 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 в заголовок, если вы хотите, чтобы содержимое внутри него располагалось относительно заголовка.

...