Как поместить темноту в изображение?

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

но сейчас это выглядит как этот

И это, как я прилагаю это изображение

<div class="bg_image" 
    style="background-image: url('images/driver_rewards/masthead_desktop.jpg')"></div>

css

.bg_image{ 
    width: 100%; 
    min-height: 503px; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

Любые предложения?

источник

2016-12-21 NietzscheProgrammer

Вы не можете затемнить изображение в графическом редакторе? Одним из вариантов было бы наложение элемента на ваше изображение и сделать его полупрозрачным с помощью 'opacity' – j08691

Вы можете применить наложение поверх фона, используя псевдоэлемент, на который можно применить непрозрачность. – connexo

ли стиль фонового изображения должен быть встроенным, или вы можете переместить его в CSS '.bg_image'? – andi

Вы можете использовать filter и установить яркость:

.bg_image{ 
    width: 100%; 
    min-height: 503px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    -webkit-filter: brightness(50%); 
    filter: brightness(50%); 
}

источник

2016-12-21 19:22:28 baao

Я использую scss. Не нужно ли webkit правильно? – NietzscheProgrammer

@NietzscheProgrammer предположил, что вы используете autoprefixer, нет, это не – baao

Спасибо, брат! Он работает отлично. – NietzscheProgrammer

Вы можете применить наложение поверх фона, используя псевдо элемент который можно применить opacity на.

.bg { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: transparent url(//lorempixel.com/300/200) no-repeat 0 0; 
 
    position: relative; 
 
} 
 
.bg > * { 
 
    z-index: 3; 
 
    color: white; 
 
    position: relative; 
 
} 
 
.bg.darken::before { 
 
    display: block; 
 
    content: ""; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    position: absolute; 
 
    background-color: black; 
 
    opacity: .5; 
 
}

<div class="bg"> 
 
    <h2>Without pseudo element for darkening</h2> 
 
</div> 
 
<div class="bg darken"> 
 
    <h2>With pseudo element for darkening</h2> 
 
</div>

источник

2016-12-21 19:27:03 connexo

Как поместить темноту в изображение?

ответ

Смежные вопросы