Применить альфа/непрозрачность к фоновому изображению

Question

Как затемнить фоновое изображение, не влияя на цвет текста?

http://jsfiddle.net/tx58qf3m/

div { 
 
    display:block; 
 
    background:url('http://placehold.it/500x500') 0 0 no-repeat; 
 
    background-color:rgba(0, 0, 0, 1); 
 
    background-size:cover; 
 
    height:500px; 
 
    width:500px 
 
} 
 
    
 

<div> 
 
    
 
    <h1>Hello, it's me!</h1> 
 
    
 
</div>

Answer 1

Использование :before

div { 
    display:block; 
    background:url('http://placehold.it/500x500') 0 0 no-repeat; 
    background-color:rgba(0, 0, 0, 1); 
    background-size:cover; 
    height:500px; 
    width:500px 
} 
    div:before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: .4; 
    z-index: 1; 
    background-color:black 
} 

http://jsfiddle.net/tx58qf3m/14/

Answer 2

Как вы можете видеть, изменить opacity из родительский элемент will affect the child element, который является h1 в вашем примере.

У вас есть несколько различных вариантов для этого, не затрагивая дочерний элемент.

1) Редактирование opacity в редакторе изображений (очевидное и занимает наименьшее количество кода)

2) Используйте псевдо элемент содержать фоновое изображение и сделать opacity изменения там - DEMO

3) Вместо того, чтобы применять ваши background-image к div, сделать еще один дочерний элемент содержит изображение - DEMO

Не забудьте настроить значения z-index.

Answer 3

Как это

<style> 

Div { 
    Position:relative; 
} 

Div:before { 
    Content:''; 
    Position:absolute; 
    Top:0; 
    Left:0; 
    Background-color:rgba (0,0,0,.5); 
    Width:100%; 
    Height:100%; 
    Z-index:2; 
    } 

Div H2 { 
Position:relative; 
Z-index:3; 
} 
    </style>