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

【问题标题】：CSS transparent background fallback when images are disabled禁用图像时的 CSS 透明背景回退
【发布时间】：2010-11-21 20:49:00
【问题描述】：

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

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

【问题讨论】：

标签： javascript css image background transparency

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我记得，如果你设置了背景颜色和背景图像，那将不适用于透明的 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 用于检查图像是否加载，您可以按照自己喜欢的方式进行操作，我更喜欢最简单的没有脚本。

【讨论】：

【解决方案4】：

我想你正在寻找一个

jQuery lightbox

喜欢的东西。

【讨论】：

【解决方案5】：

这是基于 Thinker 的帖子，但我发现它不起作用。

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

我也发现只复制背景是不行的，还得显式清除颜色，加上图片url。

我还必须将此更改应用于几个元素（子菜单uls），因此在加载函数中添加了一个循环：

$('#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 替换 Javascript 未完成，我偶尔会看到无法加载徽标图像。我尝试过预加载背景图像并从 javascript 例程返回 true，但有些东西会中断。就个人而言，这不值得冒险，因此我已从我的网站上删除了此代码。