相关疑难解决方法(0)

我有div一个background-image.rgba(0,0,0,0.1)当用户悬停div时,我想用rgba颜色()覆盖背景图像.

我想知道是否有一个div解决方案(即没有多个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请求;更少的硬盘).有没有？