我想讓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

僞類和z-index的是正確的。

通過給它一個負Z指標來定位僞元素在元素下面。

另請注意：僞類（: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>

Answer 2

我覺得你正在尋找如下的結果。

爲此我添加了一個neganitve z-index兩個僞類（.h1bcg:after和.h1bcg:before）。

希望它有幫助。

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