Question

我有一个加载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)";
}

Answer 1

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

因此可能使用透明背景图像，可能使用2x2像素图像...或

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

Answer 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);
}

IE8：半透明背景颜色，但不透明的背景图像

2 个答案: