叠加层下的文字不显示

Question

我做了一个非常基本的英雄部分，上面有背景和覆盖层。

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

    &: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: 2

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

但是hero--welcome上的文本在叠加层下以非常暗的方式显示，我希望它越过它，我该怎么做？我尝试了z-index，但是没有用。

结果（屏幕截图）

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>