IE8：半透明背景颜色但不透明背景图像答案

【问题标题】：IE8: Translucent background color but opaque background imageIE8：半透明背景颜色但不透明背景图像
【发布时间】：2013-05-18 00:33:31
【问题描述】：

我有一个加载 div，以加载符号作为背景图像。我希望加载符号完全不透明。但是，为了淡化正在加载的页面，我将背景图像设置为 80% 的不透明度。这在 Chrome 和 Firefox 中运行良好，但在 IE8 中加载符号也是半透明的。有什么办法可以淡化ie8中的背景颜色而不是背景图片？

CSS：

#loadingDiv {
    background: url(../../images/Loading32.gif) no-repeat center center;
    background-color: rgba(255,255,255, .8);
    position: absolute;
    height: 330px;
    width: 890px;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88ffffff, endColorstr=#88ffffff)";
}

【问题讨论】：

标签： css internet-explorer-8 background-image background-color

【解决方案1】：

IE8 不支持rgba，所以这就是它不透明的原因...

所以使用透明背景图像，可能使用 2x2 像素图像...或者

您可以查看CSS3 Pie 以获得 IE8 支持

【讨论】：

【解决方案2】：

遗憾的是，IE8- 不支持 rgba，也不支持 CSS 不透明度规则。就个人而言，我会创建一个半透明的 1px png 图像，并将其作为背景图像重复。

首先，创建透明的 1px png 并将其放置在图像目录中。将其命名为“translucentBG.png”。

其次，通过将以下内容放在源代码的头部，使用单独的样式表定位 IE：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
<![endif]-->

然后，在您的 css 目录中创建一个名为“all-ie-only.css”的文件。在“all-ie-only.css”中，创建以下规则：

.loadingdiv {
    background: url(../../images/translucentBG.png);
}

【讨论】：