禁用图像时CSS透明背景后退 [英] CSS transparent background fallback when images are disabled

问题描述

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

I have a DIV with a transparent PNG background applied to it. Is there a way (use of JS is fine) for me to:

1. 启用图像时有透明效果


2. 禁用图像时应用正常的纯色背景颜色

推荐答案

我记得，如果你设置背景颜色和背景图像，这对透明PNG不起作用（在透明度上你会看到背景颜色）。
Te解决方案是使用特殊的css类：

As I remember, if you set background-color and background-image, that would not work with transparent PNGs (over the transparency you will see background-color). Te solution is to use a special css class:

.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用于检查图像是否已加载，您可以按自己喜欢的方式进行，我更喜欢最简单的没有脚本。

DIV#trans_png is used to check if image is loaded, you can do it in way you like, I prefer simplest without scripting.

这篇关于禁用图像时CSS透明背景后退的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！