如何使图像显示在 :after 元素的背景之上

Question

不确定如何命名（如果其他人有更好的标题，请随意编辑帖子），但基本上客户希望顶部的一条粉红色和一条紫色的响应弧线，如屏幕截图所示：

我目前正在使用元素（粉红色）a ::before（紫色区域）和一个 ::after（粉红色线）来完成此操作（因为图像响应不足）现在我需要一个图像滑块来窥视在它下面，但目前它被它之前的层所覆盖：

它需要看起来像这样的模型：

有什么办法可以实现吗？

html:

<div class="topbar">
    <div class="container">
        <div class="logo"></div>
    </div>
</div>
<div class="container firstbelow"></div>

css:

    .topbar {
    position: relative;
    width: 100%;
    height: 200px;
    background: pink;
    overflow: hidden;
    z-index: 5;
}

.topbar:after {
    position: absolute;
    content: "";
    left: -20%;
    top: 50%;
    width: 140%;
    height: 300px;
    background: rgb(250, 244, 255);
    background-repeat: no-repeat;
    background-position: center top;
    border-radius: 100% 0 0 0 / 90%;
    border-top: 5px solid #ff88bb;
    z-index: 5;
}

.topbar:before {
    position: absolute;
    content: "";
    left: -20%;
    top: 42%;
    width: 140%;
    height: 150%;
    background: #8855bb;
    box-shadow: inset 10px -10px 5px -10px #000;
    border-radius: 80% 0 0 0 / 60%;
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-1deg);
    z-index: 5;
    }
.firstbelow {
    margin-top: -95px;
    height: 300px;
    background-image: url(../images/slider/Commercial.png);
    z-index: 4
}

（注意：是的，我知道 ::after 元素具有白色背景。如果没有，则粉红色和 putple 层会显示出来，我仍然看不到滑块图像）

Answer 1

您也可以在fixed 位置使用容器，并将padding-top 或margin top 设置为它也可能在其下方滑动的内容。

您还可以使用渐变、阴影和半径来绘制形状： sn-p 下面或 codepen

header {
  position: fixed;
  left: 0;
  width: 100%;
}
header div {
  background: linear-gradient(165deg, #FFC0CB 31%, transparent 31.5%), linear-gradient(175deg, #FFC0CB 41%, transparent 41.5%), linear-gradient(179.5deg, #FFC0CB 32.5%, transparent 33%);
  padding-top: 30px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  height: 220px;
}
header:after {
  z-index: -1;
  content: '';
  display: block;
  height: 200px;
  pointer-events: none;
  left: 0px;
  width: 100%;
  top: 120px;
  margin: -55px 0 0 0;
  border-radius: 1500px 0 0 0 / 150px 0 0 0;
  box-shadow: inset 50px 80px 0 -70px #FFC0CB, inset 20px 90px 0 -70px #8855BB, inset 30px 80px 0 -50px #FF88BB;
  position: absolute;
  box-sizing: border-box;
  border-top: solid #FFC0CB 0;
}
body {
  margin: 0 auto;
  width: 800px;
  max-width:100%;
}
nav {
  width: 800px;
  max-width:100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
nav img {
  border-radius: 50% / 3em;
  box-shadow: 0 0 5px;
  height: 80px;
  width: 80px;
}
nav a {
  vertical-align: top;
  margin: 0 1em;
  color: gray
}
main {
  padding-top: 160px;
  color: #FF88BB;
  text-shadow: 1px 1px gray;
  text-align: justify
}
h1,
h2,
h3,
pre {
  color: gray;
  display: table;
  border-bottom: solid #FFC0CB;
  padding: 0 0.25em;
  line-height: 0.8em;
}
pre {
  background: lightgray;
}
li {
  color: #8855BB
}

<header>
  <div>
    <nav>
      <a href="#">
        <img src="http://lorempixel.com/90/100/food/8" />
      </a>
      <span><a href="#"> link</a>
  <a href="#"> link</a>
  <a href="#"> link</a>
  <a href="#"> link</a>
  <a href="#"> link</a>
  <a href="#"> link</a>
  </span>
    </nav>
  </div>
</header>
<main>
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</main>

Answer 2

将topbar作为绝对元素放在页面顶部

.topbar {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 200px;
    background: pink;
    z-index: 5;
    height: <static_dimension>;
}