透明背景渲染Internet Explorer中的白色

在我的页面布局中，我有两个<div>标签。一个，编号为#image-panel，另一个编号为#image-content-panel。使用position: absolute将两个<div>堆叠在彼此的顶部。 #image-content-panel（拥有更高的z-index）位于#image-panel之上。 <div> s有background: transparent。透明背景渲染Internet Explorer中的白色

该页面在Chrome，Safari和Firefox中呈现良好，即我可以通过文本（标题和段落等）查看图像。但在IE（版本8）#image-content-panel正在以白色背景进行修订。

你可以看到下面的截图：

Rendering in Crome, Safari, Mozilla

Rendering in IE 8

相关CSS和HTML代码：

HTML Code

CSS Code

我想让页面在IE中也一样。任何帮助表示赞赏。如果无法修复，请提出替代解决方案。

来源

2012-09-05 Mohammad Yaseen

看到这个[Internet Explorer中的RGBa支持]（http://stackoverflow.com/questions/6935772/rgba-in-internet-explorer） – 2012-09-05 06:07:04

你可以请把代码放入jsfiddle.net。这样，我们中的一些人就可以更容易地找出问题所在。另外，我想建议的另一种解决方案是为IE8使用单独的样式表。 – Nightgem

UPDATE Jquery Cycle Plugin将为旧版IE中的元素添加背景颜色。

您需要在Cycle初始化中将cleartypeNoBg选项设置为true。

$("#image-content-panel").cycle({ 
    fx : 'scrollRight', 
    speed : 2700, 
    cleartypeNoBg: true 
});

EDIT的下面没有相应和

IE8不支持RGBA值和将回退到一个纯色。如果你没有定义回退，它将默认为白色，这是你所看到的。

有几种方法可以解决这个问题。

1.接受IE8的限制。

#header { 
     z-index: 100 !important; 
     width: 100%; 
     height: 50px; 
     background: rgb(0,0,0); 
     background: rgba(0,0,0,0.6); 
     margin: 10px 0 0 0; 
    }

#header将在浏览器的别一个实心黑色背景;吨支持RGBA。在浏览器中是不透明的。

2.使用一个滤波器

#header { 
     z-index: 100 !important; 
     width: 100%; 
     height: 50px; 
     background: rgba(0,0,0,0.6); 
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)" 
     margin: 10px 0 0 0; 
    }

#header将在IE8和适当的浏览器的60％的透明黑色背景。就我个人而言，我讨厌使用过滤器。它们会让你的标记变得可怕并且难以维护，除非你非常擅长将rgb转换为十六进制代码（我不知道）。此外，这个特定的过滤器是IE8 +。它不会在IE7中工作，尽管还有其他过滤器可以在IE6-7中工作。你也应该把它分解成IE8特定的样式表或者使用其他方法来防止IE9使用过滤器，因为IE9支持rgba。

3.使用1 x 1像素的黑色，半透明巴纽

#header { 
     z-index: 100 !important; 
     width: 100%; 
     height: 50px; 
     background: url(background.png) repeat; 
     margin: 10px 0 0 0; 
    }

这是我经常去，只是因为它的简单路线。如果您需要更改alpha，则需要几秒钟的时间才能创建.png，而且您不必担心浏览器不一致问题。

来源

2012-09-05 08:00:49 Turnip

我想我没有解释得很好。我的问题与'＃header'或其背景无关。它是关于'＃image-content-panel'，它具有'background：transparent'，但在IE中使用白色bg进行渲染，所以我看不到后面的图像。该图像部分被'＃image-content-panel'隐藏。请比较两张截图 –

对不起，我误解了。查看更新的答案 – Turnip

Bravo！从哪里得到'cleartypeNoBg：true'的东西？我希望我能两次投票。谢谢！ –

正如其他人所说，IE8不支持RGBA颜色值。

有一种黑客可以用来解决这个问题：我建议在您的网站上试用CSS3Pie;它在IE的旧版本中实现了许多现代CSS功能，包括背景中的RGBA颜色。

希望有所帮助。

来源

2012-09-05 08:04:57 Spudley

我觉得我没有足够好地解释自己。我的问题与'＃header'或其背景无关。它是关于'＃image-content-panel'，它具有'background：transparent'，但在IE中使用白色bg进行渲染，所以我看不到后面的图像。该图像部分被'＃image-content-panel'隐藏。请比较两个截图 –

透明背景渲染Internet Explorer中的白色

回答

相关问题