div内的文字黑色覆盖，没有不透明度

Question

我正在实施一个类似于Medium的入门，它在盒子的中央有一个黑色覆盖文本，后面有背景图像。

然而，我正在努力使文本INSIDE div与background-image没有不透明效果。

<div class="blackBackground">
    <div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
        <p class="text-inside-image">Fashion</p>
    </div>
</div>

这是我的CSS：

.blackBackground {
  background-color: black;
  z-index: -1;
}

.opacityFilter {
  opacity: 0.8;
  position: relative;

}

.margin-bottom-negsix {
  margin-bottom: -6px !important;
}


.topicImage {
    padding-bottom: 75%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    position: relative !important;
    height:150px;
    background-color: rgba(0, 0, 0, 0.8) !important;

}

.text-inside-image {
  position: absolute;
  top: 20%;
  left: 35%;
  color: white;
  font-size: 24px;
  font-weight: 500;
  z-index: 1;
}

我尝试了多种解决方案，例如CSS - Opaque text on low opacity div? 和How to keep text opacity 100 when its parent container is having opacity of 50

还有几个，但没有运气。

我在JSFiddle的进度如下：https://jsfiddle.net/RohitTigga/akz5zng7/1/

为什么会发生这种情况以及如何解决？

Answer 1

您可以像这样更改HTML

HTML

<div class="my-container">  
    <h1 class="text-inside-image">Fashion</h1>
    <img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>

<强> CSS

.my-container {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
.my-container h1 {
    padding: 50px;
    text-align: center;
    z-index: 2;
    position: relative;
    color: #fff;
} 
.my-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.6;
}

供参考String

Answer 2

您已在元素上设置半透明背景颜色，然后使用背景图像将其覆盖。

如果您希望背景图像是半透明的，请使用本质上半透明的图像。 PNG图像格式支持此功能。