Как добавить наложение на фоновое изображение?

Я видел этот вопрос как на SO, так и в Интернете. Но ни один из них не был тем, что я ищу.Как добавить наложение на фоновое изображение?

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

Пример HTML:

<div class="testclass"> 
</div>

Пример CSS:

.testclass { 
background-image: url("../img/img.jpg"); 
}

Обратите внимание:

Я хочу, чтобы решить эту проблему только с помощью CSS. i.e Я НЕ хочу добавить дочерний div в div «testclass» для цветного наложения.
Это не должно быть «эффектом зависания». Я хочу просто добавить цветное изображение к фоновому изображению.
Я хочу использовать opacity i.e. Я ищу решение, которое позволяет использовать цвет RGBA.
Это не то, что я ищу, только один цвет, скажем, черный.

Возможно ли это? (Я был бы удивлен, если бы не был, но я ничего не смог найти об этом), и если да, то какой лучший способ это сделать? Все предложения и советы указаны!

источник

2016-04-17 Alex

цветной накладной на фоне фонового изображения или за ним? –

Есть тысячи вопросов по этому вопросу ... Я действительно удивлен, что вы не нашли очевидных повторяющихся вопросов. –

yup этот вопрос дубликат. – Fiido93

Я вижу 2 простых вариантов:

мультипликатор фон с полупрозрачным градиентом o версия изображения
hudge врезке тень

градиент вариант:

html { 
 
    min-height:100%; 
 
    background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2); 
 
    background-size:cover; 
 
    }

тень вариант:

html { 
 
    min-height:100%; 
 
    background:url(http://lorempixel.com/800/600/nature/2); 
 
    background-size:cover; 
 
    box-shadow:inset 0 0 0 2000px rgba(255,0,150,0.3); 
 
    }

старый codepen шахты с несколькими примерами

источник

2016-04-17 17:38:20

Спасибо! Отмечает, что вы отвечаете как правильно, так как я думаю, что ваш ответ был тем, который больше всего соответствует моим потребностям, а также делает код более чистым, чем другие решения :) – Alex

background-image принимает несколько значений.

поэтому комбинация только одного линейного градиента цвета и css blend modes сделает трюк.

.testclass { 
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); 
    background-blend-mode: overlay; 
}

Обратите внимание, что поддержки IE/Edge для CSS-blend-mode вообще нет.

источник

2016-04-17 17:16:46 Uzi

Лучше упомянуть таблицы поддержки браузера - http://caniuse.com/#feat=css-backgroundblendmode – Stickers

вы особенно правы, учитывая, что IE/Edge не имеет поддержки полностью, и Safari падает бит позади. спасибо за указание! – Uzi

Вы можете использовать псевдоэлемент для создания наложения.

.testclass { 
    background-image: url("../img/img.jpg"); 
    position: relative; 
} 
.testclass:before { 
    content: ""; 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    background: rgba(0,0,0,.5); 
}

источник

2016-04-17 17:17:16 Stickers

-3

Вы можете добавить оттенок

Html (<div class=tint>img src chose picture of what color overlay you want</div>)

Css (.tint img{"tranparrent:50%;"}) ****

источник

2016-04-17 17:28:51

Вы даже *** прочитали *** вопрос? –

Try это, это просто и понятно. Я нашел это отсюда: https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image { 

    width: 300px; 
    height: 200px; 

    background: 
    /* top, transparent red */ 
    linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45) 
    ), 
    /* bottom, image */ 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg); 
}

источник

2017-11-02 10:55:29 Udara

Как добавить наложение на фоновое изображение?

ответ

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