如何在Sencha Touch中为叠加面板提供透明背景 [英] How to Give a Overlay Panel in sencha touch a transparent background

问题描述

下面的代码仅更改面板周围边框的颜色，而不更改面板本身。

var overlay = Ext.Viewport.add({                
    xtype: 'panel',
    centered: true,
    style:'background-color: transparent;',
    modal: {
        style: 'opacity: 0'
    },
    hideOnMaskTap:true,
    width:'20%',
    height: '50%',
    styleHtmlContent:true,
    items:[{
        xtype:'button',
        test:'hey',
        cls:'notrans',
        style: 'opacity: 1'
    }]
});             

推荐答案

您需要在居中时更改面板的x-panel-innerCLS。因此，您要做的是给您的面板一个cls，例如：cls: my-panel。

var overlay = Ext.Viewport.add({
    xtype: 'panel',
    centered: true,
    style:'background-color: transparent;',
    cls: 'my-panel',
    ....
});             

现在在您的自定义样式表中：

.my-panel .x-panel-inner {
    background-color: transparent !important;
}

现在居中的面板的背景应该是透明的。

这篇关于如何在Sencha Touch中为叠加面板提供透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！