Question

我有一个应用了透明PNG背景的DIV。有没有办法（使用JS很好）给我：

启用图像时具有透明效果
禁用图像时，为其应用正常的纯色背景

Answer 1

您应该能够提供css背景图像和背景颜色。如果图像被禁用，颜色仍应显示。

Answer 2

我想到的另一个解决方案是，您可以默认设置纯色背景，然后使用JavaScript加载图像并应用透明度。如果有人将JS禁用或图像下载失败，那么您将拥有默认的纯色背景。

Answer 3

我认为你正在寻找

jQuery lightbox

喜欢的东西。

Answer 4

我记得，如果你设置背景颜色和背景图像，这对透明PNG不起作用（在透明度上你会看到背景颜色）。解决方案是使用特殊的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

这是基于Thinker的帖子，但我发现它没有用。

我发现$('#trans_png').load没有触发（jquery 1.9.1，firefox） - 我不得不使用图像src的加载事件，即$('#logo img').attr('src', 'images/layout/logo.png').load(function() {。任何图像都可以。

我还发现只是复制背景并不起作用，我必须明确地清除颜色并添加图像网址。

我还必须将此更改应用于多个元素（子菜单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菜单上使用它。

禁用图像时CSS透明背景回退

5 个答案: