mamdiv zbackground-image. Chcę nałożyć obraz tła na kolor rgba (rgba(0,0,0,0.1)) gdy użytkownik unosi div.

Zastanawiałem się, czy nie ma rozwiązania z jednym podziałem (tj. Nie z wieloma divami, jednym dla obrazu i jednym dla koloru itp.).

Próbowałem wielu rzeczy:

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

A to 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);
}

Widziećto skrzypce.

Jedyną opcją, którą widziałem, jest zrobienie kolejnego obrazu z nakładką, wstępne załadowanie go za pomocą JavaScript, a następnie użycie.the-div:hover { background: url('the-new-image'); }. Chciałbym jednak rozwiązania tylko dla CSS (schludniejszego; mniej żądań HTTP; mniej dysku twardego). Czy jest jakiś?