У меня есть div
с background-image
. Я хочу наложить фоновое изображение на цвет rgba (rgba(0,0,0,0.1)
), когда пользователь наводит div.
Мне было интересно, есть ли одно-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-запросов, меньше жесткого диска). Есть ли?