Javascript-форум - Как с помощью стилей сделать изображение темнее

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Как с помощью стилей сделать изображение темнее (https://javascript.ru/forum/xhtml-html-css/11421-kak-s-pomoshhyu-stilejj-sdelat-izobrazhenie-temnee.html)

Как с помощью стилей сделать изображение темнее

Пишу веб-приложение, в котором требуется затемнять некоторые изображения. До этого справлялся тем, что фон под изображениями был тёмным, и изображения затемнялись прописыванием им opacity<1. Но сейчас столкнулся с тем, что затемнённые изображения могут перекрывать друг друга, и, если продолжать использовать этот метод для затемнения, изображения просвечивают сквозь друг друга.

Подскажите способ затемнить изображение с помощью стилей, желательно без создания дополнительных элементов.

Вариант перекрывать изображения полупрозрачным чёрным div'ом не подходит. Нарисовать каждое изображение в двух вариантах - тёмном и нормальном - тоже не подходит.

Гугл не помог, последняя надежда на вас.

Цитата:

Сообщение от Cooskon

Но сейчас столкнулся с тем, что затемнённые изображения могут перекрывать друг друга, и, если продолжать использовать этот метод для затемнения, изображения просвечивают сквозь друг друга.

background-color

Цитата:

Сообщение от Gvozd (Сообщение 68284)

background-color

Не помогает. Через полупрозрачное изображение всё равно видно изображение под ним.

<style>
body {
   background: #fff;
}
.image {
   position: absolute;
   width: 336px;
   height: 76px;
   background: #fff;
}
#img1 {
   top: 0;
   left: 0;
}
#img2 {
   top: 38px;
   left: 168px;
}
.image img {
   vertical-align: top;
   opacity: 0.3;
}
.image img:hover {
   opacity: 1;
}
</style>
<div class="image" id="img1"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="…" width="336" height="76"></div>
<div class="image" id="img2"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="…" width="336" height="76"></div>

Увы, Octane, такой способ не подходит, я о нём тоже думал.

Таким образом, затемнить изображение, используя только стили на элементе самого изображения, по-видимому, нельзя (Эксплореровкие фильтры не в счёт). А жаль.

Меня аж минут на двадцать подвесила эта задачка. Боюсь, что голым css тут не обойтись.
img:before не покатит, т. к. img не контейнер и генерируемого содержания у него в помине быть не может. Из svg для этих целей дёрнуть нечего. Xslt - из пушки по воробьям.

Эх вот если бы можно было пироги только из одной капусты печь и чтобы получались всё время разные, а не печеная капуста.

А жаль.