CSS3 градиенты и фоновое изображение

Question

У меня есть функция, которая при изменении статуса флажка переключает класс его родителя, чтобы получить другой градиент фона. Нажмите на Lorem, чтобы увидеть его в действии

Вы можете увидеть это здесь .

Проблема в том, что в моем примере это не сработает с блоком большего размера, поскольку для моего элемента задано фоновое изображение, я знаю, что градиент не может существовать в том же пространстве, что и фоновое изображение.

Есть ли обходной путь для добавления градиента фона к элементу? Я не могу добавить его к изображению, так как оно будет динамически заполнено, и не все изображения будут иметь одинаковые размеры.

Я не против изменить любой HTML / CSS. Если это можно сделать с помощью jQuery, это тоже замечательно:)

Answer 1

Градиенты в CSS 3 - это просто сгенерированное изображение. Так что, если ваши браузеры поддерживают несколько фонов (используйте Modenizr, чтобы проверить это), то вы можете добавить 2 фоновых изображения. Как:

.multiplebgs.cssgradients .button {
    background-image: url("img.png"), -webkit-gradient(linear, left top, left bottom, from(rgba(247,148,34,0)), to(#dc7703));
    background-image: url("img.png"), -webkit-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
    background-image: url("img.png"), -moz-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
    background-image: url("img.png"), linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
}

Answer 2

Вы можете добавить еще один div вокруг элемента с фоновым изображением и применить к нему градиент.Пока изображение прозрачное, градиент будет просвечивать.

<div id="div-with-gradient">
    <div id="div-with-image">
        <!-- content -->
    </div>
</div>