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

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

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

И этот 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-запросов; меньше жестких дисков). Есть ли?