我正在尝试将extjs(4.2.1)面板(其id为myPanel)的不透明度设置为Ext.get('myPanel').el.setOpacity(0.65)
。它在firefox和chrome中运行良好,但在IE 8中不行。最终目标是使面板透明,以便用户可以透视它。任何人都可以帮助我...
答案 0 :(得分:0)
Ext将简单地将CSS属性“opacity”或alpha透明度应用于HTML元素。在IE8中,这几乎不受支持。
然而,您可以使用插件或黑客来使IE 8与之兼容。
例如,请检查http://css3pie.com/或http://modernizr.com/。
同时检查http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/以查找问题的示例,以及如何使用PIE解决问题
当您不想使用第三方插件时,您也可以尝试:
将以下规则添加到您的媒体资源的CSS中
/ * IE8 * / - ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity = 50)”;
/ * IE 5-7 * / filter:alpha(opacity = 50);
您也可以使用Ext.get('myPanel')对Ext.js执行此操作.el.setStyle() e.g。
Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');
答案 1 :(得分:0)
终于......在打破了我的脑袋之后......我想出了两个解决方案......
1)对baseCls应用x-panel-ghost
(在拖动过程中应用的构建css中的extjs)或componentCls给出透明度。但是extjs面板的所有其他默认css都丢失了,因此我们必须手动编写它们。
2)最好的解决方案是将一个透明的图像(通过photoshop或其他东西)设置为面板标题和正文的背景图像,并将其应用到面板的cls配置中,如下所示:
在小组中:
cls: 'transparency'
,
在css文件中:
.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}
以同样的方式,身体也是如此..
希望这有助于某人...