IE 和透明背景答案

【问题标题】：IE and Transparent BackgroundsIE 和透明背景
【发布时间】：2010-11-24 06:42:57
【问题描述】：

我有以下css：

body {
     background-image: url(images/background.jpg);
     background-repeat: repeat-x;
     background-color: #99ccff;
}

不幸的是，在此页面上创建的任何 div 现在都自动具有此颜色。如果应用于页面上的任何 div，则以下任何一项都不起作用（它仍然采用上述颜色。

bacgkround: none;
background: transparent;
bacgkround-color: none;
background-color: transparent;

有人知道如何解决这个问题（在 IE 中）吗？即如何使 div 透明或没有背景颜色？

编辑：我在这里上传了截图：http://www.namhost.com/bgtrans.jpg 基本上，背景是一个渐变图像，从深蓝色变为作为背景的浅蓝色。在 Firefox 中，显示布拉德皮特的区域是透明的，您看不到蓝色轮廓。但是，在 IE 中，您会看到您在该屏幕截图中看到的内容。

这是在 Firefox 中可以看到的屏幕截图：http://www.namhost.com/bgtransfirefox.jpg

【问题讨论】：

如果您可以发布 html 代码，那么它可能有助于识别问题。或者你能给个页面链接吗？

标签： css internet-explorer styles

【解决方案1】：

您对背景颜色的假设似乎是错误的。

使背景透明意味着您将获得底层元素的背景。我认为在这种情况下它是你的身体元素。由于您已经为 body 标签设置了背景颜色，所有背景颜色为透明的元素都将显示 body 的背景颜色。

编辑：

阅读您对上述答案的评论后，我想是否显示图像路径以及图像宽度和高度是否覆盖整个身体元素。

【讨论】：

我已在我的原始帖子中添加了更改。
我还添加了截图！ :-)

【解决方案2】：

如果您可以使用 3rd 方工具，JQuery 会提供此功能：

http://mihaistancu.wordpress.com/2008/08/02/cross-browser-transparent-background-with-jquery-no-css-hacks-no-png-files/

【讨论】：

【解决方案3】：

但我认为这是应该发生的。

如果没有为 div 分配背景颜色，则正文背景颜色将可见。

特别是如果你说 div 背景是透明的。

【讨论】：

也许我不清楚。在新的 div 中，我添加了那些“背景：透明”条目，该 div 仍然显示主体的背景，而不是使其透明。
恐怕我还没明白……你不是在描述身体背景可见的情况吗，因为 div 的背景是透明的？
不，我不是。 :-) 见我上面的评论。我忘了提到该页面也有一个背景图像。我会看看我是否不能在网上放一个例子。

【解决方案4】：

不确定这里出了什么问题（如果有什么问题的话），透明和无意味着 div 不应该有自己的颜色，因此您将通过 div 看到父容器的背景...。如果父母都没有颜色，那么您将看到正文/页面的背景

【讨论】：

好的。更多信息。身体有一个背景图像和一种颜色。并且 div 位于背景的 IMAGE 部分之上。所以，理论上，如果它是透明的，你应该看到图像。但是，我看到了颜色。我在它周围添加了一个边框，这清楚地表明 div 实际上是一种纯色而不是透明的。

【解决方案5】：

不确定您的预期。对于此代码，我在 Firefox 和 IE 中得到一致的行为：

<html>
<style>
body
{
    background: green;
}
.a
{
    bacgkround-color: none;
}
</style>
<body>
<div class="a">hello</div>
<div>world</div>
</body>
</html>

如果这是一个更复杂的场景，你是使用 debugBar 来检查应用的样式，还是至少在 firefox 上使用 FireBug 来查看实际应用了什么？

【讨论】：