禁用圖片時的CSS透明背景後備

我有一個DIV，其中應用了透明的PNG背景。有沒有一種方法（使用JS是罰款）對我來說：禁用圖片時的CSS透明背景後備

有圖像時啓用
應用正常的固體背景顏色，就當圖片被禁用的透明效果

2009-08-22 jeffreyveon

正如我所記得的，如果你設置背景顏色和背景圖像，那對於透明的PNGs來說不起作用（在透明度上你會看到背景顏色）。特的解決方案是使用一種特殊的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是用來檢查是否加載圖像，你可以用你喜歡的方式去做，我更喜歡最簡單的沒有腳本。

來源

2009-08-22 06:56:58 Thinker

你應該能夠提供一個CSS背景圖像和背景顏色。如果圖像被禁用，顏色仍應顯示。

來源

2009-08-22 06:39:03 chotchki

我認爲你正在尋找一個

jQuery lightbox

喜歡的事情。

來源

2009-08-22 06:39:23 rahul

我想到的另一個解決方案是，您可以默認設置純色背景，然後使用JavaScript加載圖像並應用透明度。如果有人將JS禁用或圖像下載失敗，那麼您將擁有默認的純色背景。

來源

2009-08-22 06:39:47 RaYell

這是基於思想家的帖子，但我發現它沒有工作。我發現$('#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')); 
    }); 
});

這本質上是思想者的回答，固定的，但我不能」這可以理解爲一個評論。

只是爲了澄清，默認情況下，ULs有background-color: white;，並且div位於屏幕外div#menu-trns-bg {position: absolute;left:-3000px;background-image:url(../images/layout/body-bg.png);}我在Spry菜單上使用了此選項。

來源

2013-10-09 13:09:45 Chris

這似乎在弱連接上引入了一個漏洞。如果CSS替換Javascript沒有完成，偶爾會看到徽標圖片無法加載。我已經嘗試了預加載背景圖片，並從javascript例程中返回true，但是有些事情中斷了。就個人而言，這是不值得的風險，所以我已經從我的網站刪除了這段代碼。 – Chris 2013-10-09 15:08:27

禁用圖片時的CSS透明背景後備

回答

相關問題