html - 叠加层下的文本不显示

Question

<分区>

Answer 1

您只是将 z-index 添加到 &:before 中，并没有将 z-index 添加到实际的父 div 标签。

此解决方案将起作用:

.hero
    width: 100%
    height: 100vh
    position: relative
    background-image: url('../assets/hero.png')
    background-position: center
    background-repeat: no-repeat
    background-size: cover
    z-index: 1

    &:before 
        content: ''
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0
        background: $secondary-blue
        opacity: .5
        overflow: hidden
        z-index: -1

.hero--welcome
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column
    align-items: left
    width: 100%
    height: 100%
    z-index: 3

<div className="hero">
  <div className="hero--welcome">
    <h6>Welcome to</h6>
    <h1>Alhandsya</h1>
  </div>
</div>