画像が無効になっているときのCSS透明背景のフォールバック

Question

透明なPNG背景が適用されたDIVがあります。私のためにそこに道（JSの使用は結構です）されています

1. は、画像が
2. を有効になっているとき、透明効果を持っているイメージが

Answer 1

私が覚えているように、背景色と背景画像を設定すると、透明なPNGではうまく動作しません（背景色は透明になります）。

.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はイメージがロードされているかどうかを確認するために使用され、あなたが好きな方法でそれを行うことができます TE溶液は、特別なCSSクラスを使用することです私はスクリプティングなしで最も簡単です。

Answer 2

無効になっているときに、通常の固体の背景色を適用します。 CSSの背景画像と背景色の両方を提供できるはずです。イメージが無効になっている場合、色はまだ表示されます。

Answer 3

私はあなたの事のような

jQuery lightbox

を探していると思います。

Answer 4

私の頭に浮かぶもう1つの解決策は、デフォルトで堅実な背景を設定してから、JavaScriptでイメージをロードして透過性を適用できることです。誰かがJSを無効にしたり、イメージのダウンロードに失敗すると、デフォルトの堅実な背景が得られます。

Answer 5

これはThinkerの投稿に基づいていますが、動作していないことがわかりました。

私は、$('#trans_png').loadが（jquery 1.9.1、firefox）トリガーしていないことを発見しました。画像のsrcのロードイベント、すなわち$('#logo img').attr('src', 'images/layout/logo.png').load(function() {を使用しなければなりませんでした。すべての画像が行います。

背景をコピーしても機能しないことがわかったので、明示的に色を消去して画像URLを追加する必要がありました。

ので、負荷の関数内でループを追加しました私はまた、いくつかの要素（サブメニューul秒）にこの変更を適用する必要がありました：

$('#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')); 
    }); 
}); 

これは、本質的に固定思想家の答え、である、しかし、私は「couldnこれを知覚的にコメントに合わせてください。

明確にするために、ULはデフォルトでbackground-color: white;を持ち、divは画面外に配置されていますdiv#menu-trns-bg {position: absolute;left:-3000px;background-image:url(../images/layout/body-bg.png);}私はこれをSpryメニューで使用しています。