Изменения фон непрозрачность только

Question

У меня есть следующий HTML

<h1 class="title-wrapper"><span class="title">Example</span></h1> 

У меня есть следующие CSS:

.title-wrapper { 
    text-align: left; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-image: linear-gradient(90deg, rgb(53,65,76) 0%, rgba(53,65,76,0) 100%); 
    opacity: 0.51; 
    display: block; 
    width: 100%; 
    z-index: 5; 
    padding: 12.5px 0 12.5px 12px; 
} 

.title { 
    opacity: 1.0; 
    font-size: 1.3em; 
    font-weight: 600; 
    color: white; 
} 

Я хочу, чтобы установить непрозрачность титульной обертку фон изображения до 0.51, но я хотите сохранить непрозрачность текста в 1.0. Как я могу это сделать?

Прямо сейчас текст выглядит действительно бледным. Я предполагаю, что непрозрачность обложки заголовка влияет на текст.

Answer 1

Вы можете определить фоновое изображение в: перед классом псевдо

.title-wrapper { 
 
    text-align: left; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: block; 
 
    width: 100%; 
 
    z-index: 5; 
 
    padding: 12.5px 0 12.5px 12px; 
 
} 
 

 
.title-wrapper:before{ 
 
    content:''; 
 
    background-image: linear-gradient(90deg, rgb(53,65,76) 0%, rgba(53,65,76,0) 100%); 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    opacity:0.51; 
 
    z-index: -1; 
 
} 
 

 
.title { 
 
    font-size: 1.3em; 
 
    font-weight: 600; 
 
    color: white; 
 
}

<h1 class="title-wrapper"><span class="title">Example</span></h1>

Answer 2

Почему бы вам не использовать RGBA цвета на всем пути?

.title-wrapper { 
 
    text-align: left; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(90deg, rgba(53,65,76,0.51) 0%, rgba(53,65,76,0) 100%); 
 
    /*opacity: 0.51;*/ 
 
    display: block; 
 
    width: 100%; 
 
    z-index: 5; 
 
    padding: 12.5px 0 12.5px 12px; 
 
} 
 

 
.title { 
 
    opacity: 1.0; 
 
    font-size: 1.3em; 
 
    font-weight: 600; 
 
    color: white; 
 
} 
 
/* DEMO purpose*/ 
 
body { 
 
    background:url(http://lorempixel.com/600/300/city/1); 
 
    background-size:cover 
 
    }

<h1 class="title-wrapper"><span class="title">Example</span></h1>