Применение непрозрачности к изображению

Question

Я хочу применить непрозрачность к изображению. Проблема в том, что непрозрачность также применяется к тексту H1 внутри изображения. Как применить непрозрачность только к изображению?

HTML:

<div class="jumbotron quem-somos"> 
    <h1>Quem somos?</h1> 
</div> 

CSS:

.quem-somos { 
    background-image: url('../images/capa8.png'); 
    opacity: 0.4; 
} 

Результат выше код:

Answer 1

Я считаю, что ответ Drixson Oseña выполняет именно то, что вы хотите.

Но если по какой-то причине вам нужно изображение, чтобы действительно быть фоновым изображением CSS (например, вам нужно его повторить или что-то в этом роде), тогда что-то вроде следующего подхода должно работать. Подобно тому, что делал Drixson, он использует абсолютное позиционирование, чтобы складывать два элемента друг над другом, с отдельной непрозрачностью, установленной для каждого из них.

div.wrapper { 
 
    position: relative; 
 
    width: 911px; 
 
    height: 223px; 
 
} 
 
div.background { 
 
    position: absolute; 
 
    background-image: url('http://i.imgur.com/DQM3xDw.png'); 
 
    width: 911px; 
 
    height: 223px; 
 
    opacity: 0.4; 
 
} 
 
div.quem-somos { 
 
    position: absolute; 
 
    background: transparent; 
 
}

<div class="wrapper"> 
 
    <div class="background"></div> 
 
    <div class="jumbotron quem-somos"> 
 
    <h1>Quem somos?</h1> 
 
    </div> 
 
</div>

Answer 2

Непрозрачность применяется к контейнеру. Вы должны поместить свое изображение не в фоновом режиме. Попробуйте что-то вроде этого:

<div class="jumbotron" style="position:relative;width:300px;"> 
    <img src="http://i.imgur.com/DQM3xDw.png" style="opacity:0.4;position:absolute;width:100%;" /> 
<h1>Quem somos?</h1> 

Обновления: ширина изображений теперь будет полагаться на это ширина контейнера.