у меня естьdiv сbackground-image, Я хочу наложить фоновое изображение цветом RGBA (rgba(0,0,0,0.1)) когда пользователь наводит курсор на элемент div.

Мне было интересно, есть ли решение с одним делением (т.е. не с несколькими делениями, одно для изображения, одно для цвета и т. Д.).

Я пробовал несколько вещей:

<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>

И этот CSS:

.the-div {
    background-image: url('the-image');
    margin: 10px;
    width: 200px;
    height: 80px;
}

#test-1:hover {
    background-color: rgba(0,0,0,0.1);
}

#test-2:hover {
    background: url('the-image'), rgba(0,0,0,0.1);
}

#test-3:hover {
    background: rgba(0,0,0,0.1);
}

Видетьэта скрипка.

Единственный вариант, который я видел, это сделать другое изображение с наложением, предварительно загрузить его с помощью JavaScript, а затем использовать.the-div:hover { background: url('the-new-image'); }, Тем не менее, я бы хотел решение только для CSS (аккуратнее; меньше HTTP-запросов; меньше жесткого диска). Есть ли?