Question

我正在尝试将extjs（4.2.1）面板（其id为myPanel）的不透明度设置为Ext.get('myPanel').el.setOpacity(0.65)。它在firefox和chrome中运行良好，但在IE 8中不行。最终目标是使面板透明，以便用户可以透视它。任何人都可以帮助我...

Answer 1

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)');

Answer 2

终于......在打破了我的脑袋之后......我想出了两个解决方案...... 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;
}

以同样的方式，身体也是如此..

希望这有助于某人...

Ext.get（'myPanel'）。el.setOpacity（0.65）在IE 8兼容模式下无效

2 个答案: