Div 背景的不透明性不影响 IE8中包含的元素？

我想设置不透明的 div 的背景不影响包含的元素在 IE8。有任何解决方案，不要回答设置1X1。Png 图像和设置不透明度的图像，因为我使用动态不透明度和颜色管理员可以改变

我用过，但不在 IE8中工作

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

还有

rgba(0,0,0,0.3)

还有。

286315 次浏览
小开

尝试在所包含的元素上设置较高的 z 索引。

小开

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

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 */

你可以从这里生成你的 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颜色设置当然会起作用，但是它会限制你只能使用颜色作为背景。恐怕没有图像。你当然可以使用 CSS3渐变，但是如果你在 rgba中提供渐变停止颜色。那也行。

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

无警报 模态对话框功能

But if you're after some kind of masking the whole page, this is usually done by adding a separate div with this set of styles:

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。但是这两个元素在兄弟姐妹或其他方面是没有联系的。它们只是被展示出来而已。一个接一个。

小开
最佳答案

The opacity style affects the whole element and everything within it. The correct answer to this is to use an rgba background colour instead.

CSS 相当简单:

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

...where the first three numbers are the red, green and blue values for your background colour, and the fourth is the 'alpha' channel value, which works the same way as the opacity value.

See this page for more info: http://css-tricks.com/rgba-browser-support/

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

好消息是，你可以强迫 IE 也使用这种方法，使用一种称为 CSS3Pie的黑客技术。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 过滤器的需要，因此样式表要干净得多。(它还增加了一大堆其他好的特性，但这与本文讨论无关)

小开

也许有一个更简单的答案，尝试添加任何背景颜色你喜欢的代码，如 背景色: # fff;

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

这种方法怎么样:

	<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>

小开

当您将不透明特性用于非绝对位置时，它会影响整个子 div。所以另一种实现它的方法是不把 div 放在对方的内部，然后使用 div 的绝对位置。不要使用任何背景颜色为上分割线。

小开

使用 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;

提交答案