CSS прозрачный фон откат, когда изображения отключены

Question

У меня есть DIV с прозрачным фоном PNG. Есть ли способ (использование JS нормально) для меня:

1. Эффект прозрачности при включении изображений
2. Применять к нему обычный сплошной цвет фона, когда изображения отключены

Answer 1

Другое решение, которое приходит мне в голову, это то, что вы можете установить сплошной фон по умолчанию, затем загрузить изображения (изображения) с JavaScript и применить прозрачность. Если у кого-то будет отключен JS или загрузка изображения не удастся, у вас будет сплошной фон по умолчанию.

Answer 2

Вы должны быть в состоянии предоставить как css background-image, так и background-color. Если изображения отключены, цвет все равно должен отображаться.

Answer 3

Это основано на посте Мыслителя, но я обнаружил, что оно не работает.

Я обнаружил, что $('#trans_png').load не срабатывает (jquery 1.9.1, firefox) - мне пришлось использовать событие загрузки src изображения, т. Е. $('#logo img').attr('src', 'images/layout/logo.png').load(function() {. Подойдет любое изображение.

Я также обнаружил, что просто копирование фона не работает, мне пришлось явно очистить цвет и добавить URL-адрес изображения.

Мне также пришлось применить это изменение к нескольким элементам (подменю ul s), поэтому в функцию загрузки был добавлен цикл:

$('#logo img').attr('src', 'images/layout/logo.png').load(function() {
    $("ul.MenuBarHorizontal ul").each(function() {
        $(this).css('background-color','none').css('background','none').css('background', $('#menu-trns-bg').css('background-image'));
    });
}); 

Это, по сути, ответ Мыслителя, исправленный, однако я не смог вразумительно вписать это в комментарий.

Просто чтобы уточнить, UL по умолчанию имеют background-color: white;, а div расположен вне экрана div#menu-trns-bg {position: absolute;left:-3000px;background-image:url(../images/layout/body-bg.png);} Я использую это в меню Spry.

Answer 4

Насколько я помню, если вы установили background-color и background-image, это не сработало бы с прозрачными PNG (поверх прозрачности вы увидите background-color). Решение состоит в том, чтобы использовать специальный класс CSS:

.trans_back { background:red }
DIV#trans_png { background:url(reddot.png); position:absolute; left:-9px; }

Затем создайте скрипт:

$().ready(function(){
  $('#trans_png').load(function(){
    $('.tans_back').css('background',$(this).css('background'));
  });
});

DIV # trans_png используется для проверки, загружено ли изображение, вы можете делать это так, как вам нравится, я предпочитаю самое простое без сценариев.

Answer 5

Я думаю, что вы ищете

jQuery лайтбокс

как вещь.