不影响 IE 8 中包含的元素的 div 背景不透明度？答案

【问题标题】：Opacity of div's background without affecting contained element in IE 8?不影响 IE 8 中包含的元素的 div 背景不透明度？
【发布时间】：2011-08-05 10:51:56
【问题描述】：

我想在不影响 IE 8 中包含的元素的情况下设置 div 背景的不透明度。有任何解决方案并且不回答设置 1 X 1 .png 图像并设置该图像的不透明度，因为我使用的是动态不透明度和颜色管理员可以改变它

我用过，但不能在 IE 8 中工作

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

和

rgba(0,0,0,0.3)

还有。

【问题讨论】：

你不能这样做。属性 opacity 影响元素的所有内容（其他 html 元素 + 文本）。但我不明白你为什么不想使用 png。你只需要一起改变图像你改变css（因为我认为你有不同的css可以由管理员切换）
@Corum：你错了（和我一样）。有可能的。看看这篇博文。 robertnyman.com/2010/01/11/… 非常聪明。
刚刚发布在这里：stackoverflow.com/a/11755175/1491212>希望对您有所帮助！

标签： css internet-explorer-8 opacity

【解决方案1】：

opacity 样式会影响整个元素以及其中的所有内容。正确的答案是使用 rgba 背景颜色。

CSS 相当简单：

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

...其中前三个数字是背景颜色的红色、绿色和蓝色值，第四个是“alpha”通道值，其工作方式与 opacity 值相同。

查看此页面了解更多信息：http://css-tricks.com/rgba-browser-support/

不利的一面是，这在 IE8 或更低版本中不起作用。我上面链接的页面还列出了一些其他无法使用的浏览器，但它们现在都已经很旧了；当前使用的所有浏览器（IE6/7/8 除外）都可以使用 rgba 颜色。

好消息是，您也可以使用名为CSS3Pie 的 hack 来强制 IE 使用它。 CSS3Pie 为旧版本的 IE 添加了许多现代 CSS3 功能，包括 rgba 背景颜色。

要将 CSS3Pie 用于背景，您需要在 CSS 中添加特定的 -pie-background 声明，以及 PIE behavior 样式，因此您的样式表最终将如下所示：

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

希望对您有所帮助。

[编辑]

正如其他人所提到的，您可以使用 IE 的 filter 样式和 gradient 关键字。 CSS3Pie 解决方案实际上在幕后使用了相同的技术，但无需您直接使用 IE 的过滤器，因此您的样式表更加简洁。（它还添加了一大堆其他不错的功能，但这与本次讨论无关）

【讨论】：

太棒了！这对我帮助很大。

【解决方案2】：

很简单，你要做的就是给予

background: rgba(0,0,0,0.3)

& IE 使用这个过滤器

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

你可以从这里http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/生成你的rgba过滤器

【讨论】：

渐变与不透明度有什么关系？：S
@Robert Koritnik：请参阅我的这个答案版本以获得更好的解释 - stackoverflow.com/questions/5160419/… 也在这里：stackoverflow.com/questions/4788564/…
@robert，它是唯一的 IE 过滤器，可在网络上使用，它的效果与 rgba 相同，我不是过滤器专家。
@Robert 它只是工作 ;) see this link - @sandeep 我修复了过滤器代码以添加必要的成分（透明背景和 hasLayout），更改过滤器顺序 .. 如果你可以随意回滚不同意;)
@sandeep 过滤器在没有 hasLayout 的情况下将无法工作，您的代码中可能还有另一个 hasLayout 属性，也许是宽度？我正在单手工作.. 手腕骨折，因此我的回复很慢，但这里是 jsfiddle，带有条件注释中的相关 IE 代码，用于比较两种方法

【解决方案3】：

父元素上的`opacity` 为整个子 DOM 树设置它

您不能真正为不会级联到后代的某些元素设置不透明度。恐怕这不是 CSS opacity 的工作方式。

你可以做的是在一个容器中有两个兄弟元素并设置透明的定位：

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

那么你必须设置透明的position: absolute/relative，这样它的内容兄弟才会被渲染。

`rgba`可以做彩色背景的背景透明度

元素的background-color 上的rgba 颜色设置当然会起作用，但它会限制您仅使用颜色作为背景。恐怕没有图像。当然，如果您在rgba 中提供渐变停止颜色，您当然可以使用 CSS3 渐变。这也有效。

但请注意，您所需的浏览器可能不支持rgba。

无警报模态对话框功能

但是，如果您要对整个页面进行某种屏蔽，通常可以通过使用这组样式添加单独的 div 来完成：

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

那么当你显示内容时它应该有一个更高的z-index。但这两个元素在兄弟姐妹或任何东西方面都没有关系。它们只是按应有的方式显示。一个比一个。

【讨论】：

这是正确的答案，甚至可以使用 bg-images

【解决方案4】：

尝试在包含的元素上设置更高的 z-index。

【讨论】：

【解决方案5】：

这种方法怎么样：

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

【讨论】：

【解决方案6】：

当您将不透明度功能用于绝对位置以外的位置时，它会影响整个子 div。因此，实现它的另一种方法是不要将 div 放在彼此内部，然后使用绝对位置作为 div。不要为上部 div 使用任何背景颜色。

【讨论】：

【解决方案7】：

也许有更简单的答案，尝试在代码中添加您喜欢的任何背景颜色，例如 background-color: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

【讨论】：

它也在影响内容！

【解决方案8】：

使用 RGBA，或者如果您使用十六进制代码，则将其更改为 rgba。无需做一些 presodu 元素 css。

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

或

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;

【讨论】：

父元素上的opacity 为整个子 DOM 树设置它

rgba可以做彩色背景的背景透明度

无警报模态对话框功能

父元素上的`opacity` 为整个子 DOM 树设置它

`rgba`可以做彩色背景的背景透明度