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

我认为您正在寻找以下结果。

为此我已经为两个psuedo类（z-index和.h1bcg:after）添加了一个neganitve .h1bcg:before。

希望它有所帮助。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

伪类和z-index是正确的。

通过给出一个负z-index来将伪类放在元素下面。

另请注意：伪类（:before和:after样式规则）适当地应用于包含原始类（.h1bcg）的元素。您不必在HTML中指定这些类才能使它们生效。

.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形状下面的文字在顶部

2 个答案: