我想设置不透明度div的背景,而不影响包含的元素在IE 8。有任何@R_301_463@案,不回答设置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.3)
也。
解决方法
不透明样式影响整个元素及其中的一切。正确的答案是使用rgba背景颜色。
CSS很简单:
.myelement { background: rgba(200,54,0.5); }
…其中前三个数字是您的背景颜色的红色,绿色和蓝色值,第四个是“alpha”通道值,其工作方式与不透明度值相同。
有关详细信息,请参阅此页:http://css-tricks.com/rgba-browser-support/
缺点是,这不工作在IE8或更低。我上面链接的页面还列出了一些其他浏览器,它不工作,但他们都很老了;所有目前使用的浏览器,除了IE6 / 7/8将使用rgba颜色。
好消息是,你可以强制IE使用这个工具,使用一个名为CSS3Pie的黑客。CSS3Pie添加了一些现代CSS3功能,旧版本的IE,包括rgba背景颜色。
要使用CSS3Pie作为背景,您需要向CSS添加特定的Pie-Background声明以及PIE行为样式,因此您的样式表最终将显示为:
.myelement { background: rgba(200,0.5); -pie-background: rgba(200,0.5); behavior: url(PIE.htc); }
希望有帮助。
[编辑]
对于什么是值得的,正如其他人提到的,您可以使用IE的过滤器样式,与gradient关键字。 CSS3Pie@R_301_463@案确实在幕后使用了相同的技术,但是不再需要直接使用IE的过滤器,所以你的样式表更干净。 (它也添加了一大堆其他好的功能,但是这与本讨论无关)