IE8中的背景不透明度不起作用答案

【问题标题】：background opacity in IE8 not workingIE8中的背景不透明度不起作用
【发布时间】：2014-03-07 18:04:39
【问题描述】：

这里我有 2 张带有 IE8 和 IE9 的图片。下面是我的代码

.ui-widget-content { border: 0px solid #aaaaaa/*{borderColorContent}*/; background: rgba(0, 0, 0, 0.1) ;     /*{bgColorContent}*/ url(images/scroll.png)/*{bgImgUrlContent}*/ 0/*{bgContentXPos}*/ 0/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/;  border-top: solid 1px #FF0000;}
.ui-widget-content a { color: #222222/*{fcContent}*/; }

背景：rgba(0, 0, 0, 0.1) ;这在 IE9 中运行良好，但在 IE8 中无法运行。请帮助解决此问题

【问题讨论】：

试试这个：filter: alpha(opacity=10);
IE8 本身不支持，您需要使用专有的filter 属性来实现。

标签： javascript jquery css internet-explorer-8

【解决方案1】：

http://www.w3schools.com/css/css_image_transparency.asp

img{
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
}

【讨论】：

【解决方案2】：

Google 是你的朋友。

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;

取自http://css-tricks.com/snippets/css/cross-browser-opacity/

【讨论】：

【解决方案3】：

rgba() 不适用于 IE8，因此您可以使用

filter:alpha(opacity=10);

模拟 0.1 的不透明度。但这甚至会在元素中包含的文本（及其子元素，如果有）上应用不透明度，因此您可以改为应用重复的小 24 位 png 图像（全黑且不透明度设置为 10%）为元素的背景，例如

background: url(black-transparent.png)

（这里是图片 - 50x50, 166bytes - 如果你需要的话）

或者，如果您愿意，这里是同一图像的 base64 编码（这样您就可以保存请求）

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEhJREFUeNrszzERACAMALEHGfUvFBcMvcRBTjUtcFtCRERERERERERERERERERERERERERERERERERERERERERERERE5I8nwADPFwB+fDlyvAAAAABJRU5ErkJggg==

【讨论】：

【解决方案4】：

RGBA 在 IE8 及之前的版本中不起作用，您必须使用filter:alpha(opacity=XX) 作为 IE 的 hack：

.ui-widget-content { 
  border: 0px solid #aaaaaa; 
  background: rgba(0, 0, 0, 0.1)  url(images/scroll.png) 0 0 repeat-x; 
  *filter:alpha(opacity=10);/*For pre-IE8 MS browsers*/
  color: #222222;  
  border-top: solid 1px #FF0000;
}

【讨论】：

【解决方案5】：

我在 global.asax 文件中添加了这段代码，它在 IE8 中也可以正常工作

protected void Application_BeginRequest(object sender, EventArgs e) { //Response.AddHeader("X-UA-Compatible", "IE=edge, Chrome=1");

感谢您的建议

【讨论】：

【解决方案6】：

这是我用来在旧浏览器上替换 RGBA 的代码。

这是一个不错的 RGBA 到 ARGB 转换器，支持旧版浏览器：http://beijingyoung.com/articles/rgba-argb-converter/

background: #FFFFFF !important; /* the background */
-moz-opacity: 0.6; /* Mozilla 1.6 and below   */
opacity: 0.6; /* newer browser and CSS-3 */
-ms-filter: "alpha(opacity=60) progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF,endColorstr=#99FFFFFF)"; /* IE8 */
filter: alpha(opacity=60) progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF,endColorstr=#99FFFFFF); /* IE6 & 7 */
zoom: 1;

【讨论】：