Текст внутри div над черным наложением БЕЗ непрозрачности

Question

Я реализую посадку, похожую на Medium, которая имеет текст в центре коробки над черным наложением с фоновым изображением за ним.

Однако, я борюсь с созданием текста внутри DIV с фоновым изображением не имея непрозрачность эффекта.

<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; 
} 

для справки https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview

Answer 2

Вы ВГА e установить полупрозрачный фон цвет на элемент, а затем покрыл его с фоновым изображением.

Если вы хотите, чтобы фоновое изображение было полупрозрачным, используйте изображение, которое является внутренне просвечивающим. Формат изображения PNG поддерживает это.