我想在不影响IE 8中所包含元素的情况下设置div背景的透明度。请问是否有任何解决方案？请勿回答使用设置1X1.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 样式会影响整个元素及其内部的所有内容。正确的做法是使用 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将许多现代CSS3功能添加到旧版IE中，包括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的过滤器打交道的需要，因此您的样式表更加清洁。（它还添加了许多其他不错的功能，但这与本讨论无关）
很简单，你需要做的只是提供
background: rgba(0,0,0,0.3)
& for IE use this filter
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 */
你可以从这里生成你的rgba过滤器 http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
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。但这两个元素在兄弟姐妹或其他方面并不相关。它们只是按照应该的方式一层放在另一层上面。
尝试在包含元素上设置更高的 z-index。
<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>也许有一个更简单的答案，尝试将喜欢的任何背景颜色添加到代码中，例如background-color: #fff;
#alpha {
background-color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
}
使用RGBA或者如果你使用十六进制代码，那么将其转换为RGBA。不需要对一些预设元素的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;