Superposition d'une image de fond d'écran avec une rgba couleur d'arrière-plan

J'ai un div avec un background-image. Je veux superposition de l'image de fond d'écran avec une couleur rvba (rgba(0,0,0,0.1)) lorsque l'utilisateur place le pointeur de la div.

Je me demandais si il y a un div solution (c'est à dire pas avec plusieurs divs, un pour l'image et l'autre pour la couleur, etc.).

J'ai essayé plusieurs choses:

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

Et ce 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);
}

Voir ce violon.

La seule option que j'ai vu est de faire une autre image, avec la superposition, la précontrainte à l'aide de JavaScript et ensuite utiliser .the-div:hover { background: url('the-new-image'); }. Cependant, je voudrais un CSS seule solution (plus propre, moins de requêtes HTTP; moins de disque dur). Est-ce là tout?

InformationsquelleAutor Keelan | 2013-06-16