Как затемнить картинку, не background-image?

Question

[Bauss]

Есть div и в нем картинка, как собственно затемнить эту картинку? без использования background-image, так как в этом блоке может быть и больше картинок, background rgba для mask пробовал, не помогло

<div class="mask">
    <img src="" alt="">
</div>

Comments

[Евгений Вольф]

Добавить поверх блок с background-color: rgba(...)? Не совсем понятно, что Вы хотите...

[Bauss]

Евгений Вольф: дописал вопрос, думаю так понятнее будет :D

Answer 1

[Евгений Вольф]

Ну так вот на вскидку, можно воткнуть в блок .mask (если картинки располагаются в нем) блок с абсолютными позиционированием и 100% ширины/высоты, с нужным bg-rgba или сплошной заливкой и прозрачностью... Если по дереву, элемент который должен "затемнять" другие элементы НЕ находится выше элементов, которые он должен затемнять - то затемнить их пожалуй не получиться.

Хотя, в качестве альтернативного варианта, можно рассмотреть CSS-фильтры, за их кроссбраузерность не ручаюсь, пока не нужны были в серьёзных проектах.

P.S. У фильтров можно устанавливать отрицательные значения, в примере по ссылке выше такой возможности нет.