在不影响IE 8中包含的元素的背景不透明度?

我想设置不透明div的背景,而不会影响IE 8中包含的元素。有任何解决scheme,不要回答设置1 X 1 .png图像,并设置该图像的不透明度,因为我使用的dynamic不透明度和颜色pipe理可以改变那

我用过,但不能在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颜色。

好消息是,你可以强制IE浏览器使用CSS3Pie 。 CSS3Pie为老版本的IE添加了一些现代的CSS3function,包括RGB背景颜色。

要将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解决scheme实际上在幕后使用了相同的技术,但是不需要直接使用IE的filter,所以样式表要干净得多。 (它也增加了一大堆其他不错的function,但这与这个讨论无关)

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

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

&为IE使用此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 */ 

你可以从这里生成你的rgbafilterhttp://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

无警报模式对话框function

但是,如果你在屏蔽整个页面之后,通常通过添加一个单独的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 。 但是这两个元素在兄弟姐妹方面没有任何关系。 他们只是应该显示。 一个在另一个。

也许有一个更简单的答案,尝试添加你喜欢的任何背景颜色的代码,如background-color:#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> 

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

它会影响整个孩子divs,当您使用不透明度function与绝对的位置。 所以,另一种实现方法是不要把div放在div里面,然后用div来代替div。 不要使用任何背景颜色的上部分。