html - 如何使图像显示在 :after element 的背景之上

Question

不确定如何给这个标题(如果其他人有更好的标题，请随意编辑帖子)但本质上，客户希望沿着顶部的一条粉红色和一条紫色的响应弧线，如屏幕截图所示:

我目前正在使用元素(粉红色)a::before(紫色区域)和::after(粉红色线)完成此操作(因为图像响应不够)现在我需要一个图像 slider 来查看在它下面，但目前它被它前面的层覆盖:

它需要看起来像这个模型:

我有什么办法可以完成这个吗？

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 元素有白色背景。如果没有，则粉红色和紫色层会显示出来，但我仍然看不到 slider 图像)

Answer 1

您还可以在固定位置使用容器，并设置padding-top或margin top到它可能还包含的内容滑到下面。

你也可以玩 gradient ， shadow 和 radius 来绘制你的形状: 下面的片段或 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>