我想让 CSS 形状下方的文字位于顶部

Question

我已经尝试过 z-index。我认为它与伪类有关，但我不知道它到底是什么......我是新手所以我只能做HTML和CSS 目前，我不知道任何 JS。谢谢！ :)

.h1bcg {
  margin-top: 180px;
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 200px;
  width: 666px;
}

.h1bcg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
}

.h1bcg:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
}

      <div class="h1bcg:before h1bcg:after ">
         <h1 class="text-center h1bcg"> Lorem              ipsum dolor sit amet. </h1>
      </div>

Answer 1

我想你正在寻找以下结果。

为此，我在两个伪类（.h1bcg:after 和 .h1bcg:before）中添加了一个否定 z-index。

希望对您有所帮助。

.h1bcg {
  margin-top: 180px;
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 200px;
  width: 666px;
}

.h1bcg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
  z-index:-1;
}

.h1bcg:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
  z-index:-1;
}

<div class="h1bcg:before h1bcg:after ">
  <h1 class="text-center h1bcg"> Lorem ipsum dolor sit amet.</h1>
</div>

Answer 2

伪 classes 和 z-index 是正确的。

通过给它一个负的 z-index 来将伪classes 定位在元素下面。

另请注意：伪 classes（:before 和 :after 样式规则）应用于包含原始 class（.h1bcg ）适当。您不必在 HTML 中指定这些 class 即可生效。

.h1bcg {
  margin-top: 180px;
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 200px;
  width: 666px;
}

.h1bcg:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
}

.h1bcg:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
}

<div>
  <h1 class="text-center h1bcg"> Lorem              ipsum dolor sit amet. </h1>
</div>

我想让 CSS 形状下方的文字位于顶部

I want to make the text below the CSS shape be on top

html

css

css-shapes