Html 我怎样才能有一个透明的覆盖和中心的flex框？

我有一个带有背景图像的块元素。我正试图：

• 在背景图像顶部添加透明渐变覆盖
• 使用flexbox将另一个块元素居中

我已经独立地实现了这两个目标，请参见以及下面的图像和代码

使用透明覆盖（移除子块HTML）：

将子块居中（移除覆盖CSS）：

但是，当我尝试组合效果时，flexbox停止工作，并且子块周围缺少覆盖

这是我的HTML

<div class="container">
  <p>title goes here</p>
</div> 

---

如何同时获得半透明覆盖和flexbox？

对于

。容器：在
之后，将
位置：相对更改为
位置：绝对

现场、工作示例：


.container{
背景：url（“http://msue.anr.msu.edu/uploads/images/forest.jpg");
高度：400px；
宽度：100%；
盒影：嵌入0px-4px14px 0px rgba（50,50,50,0.71）；
背景尺寸：100%自动；
z指数：0；
位置：相对位置；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明内容：中心；
}
.货柜{
显示：块；
颜色：红色；
文本对齐：居中；
字号：24pt；
背景颜色：蓝色；
z指数：2；
}
.货柜：之后{
内容：''；
背景：线性梯度（135度，dc4225度，292484度）；
宽度：100%；
身高：100%；
不透明度：0.5；
排名：0；
左：0；
显示：块；
z指数：1；
位置：绝对位置；
}

标题在这里

如果人们需要像我一样将容器的位置设置为绝对位置：

.container {
    @include inline-flex;
    @include flex-direction(column);
    @include align-items(center);
    @include justify-content(center);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 16px;
    height: 100%;
    width: 100%;
    position: absolute;
    white-space: normal;
    z-index: 1;
}

.container::after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.8);
    z-index: -1;
}

这里的重要部分是
rgba
和
z-index
。容器的背景图像是在代码中动态设置的，但这与此处无关。
除非您有Sass->CSS编译问题，否则只发布编译后的CSS。非常好-非常棒！我自己刚刚找到了一个解决方案，但它涉及到一个额外的元素。这好多了！
.container {
    @include inline-flex;
    @include flex-direction(column);
    @include align-items(center);
    @include justify-content(center);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 16px;
    height: 100%;
    width: 100%;
    position: absolute;
    white-space: normal;
    z-index: 1;
}

.container::after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.8);
    z-index: -1;
}