html - 网格中图像的透明度

Question

我的带有网格和图像透明度的 extjs 4.2 MVC 应用程序有点问题:这是我的网格:

Ext.define('XProject.view.message.inbox.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.inboxgrid',
    store: 'message.Inbox',
    requires: [
        'Ext.ux.grid.FiltersFeature'  ,
        'XMailweb.view.message.inbox.CtxMenu'
    ],

    viewConfig: {
        getRowClass: function (record, rowIndex, rowParams, store) {
            if ((record.get('Flags') & 2 )== 0) {
                return "boldFont";
            }
            if (record.get('Err_Id') != 0) {
                return "redFont";
            }            
        }
    },

    selType: 'checkboxmodel',
    selModel: {
        checkOnly: false,
        injectCheckbox: 0
    },    

    features : [{
        ftype: 'filters',
        autoReload: false, 
        encode:true,
        paramPrefix : 'Filter'
    }],

    columns: [{
        xtype: 'gridcolumn',
        cls: 'attach',
        width: 18,
        dataIndex: 'Files_Num',
        menuDisabled: true,
        sortable:false,
        text: 'Attachment',
        renderer: function(value, metaData, record ){
            if (value >= 1){
                metaData.css  = 'attach';
            }
            return '';
        }       
    }]
})

其他列省略。我的 CSS Angular 色是:

.attach {
    background:transparent url('../icons/attach.png') no-repeat center left !important;
    text-indent: -250px;
}

我的 attach.png 是透明的，但是当渲染网格时(具有备用行背景颜色)出现白色背景。这是我的透明图像:

还有我渲染的网格:

为什么没有透明背景(网格中的所有 css 图像)？我尝试使用 firefox 和 iexplorer，但结果是一样的。有什么想法吗？

Answer 1

Background:transparent 覆盖背景色。

使用:

.attach,.attach .x-column-header-over{
    background-image:url('../icons/attach.png') !important;
    background-position:center left;
    background-repeat:no-repeat ;
}

之间:

background:transparent url('../icons/attach.png') no-repeat center left !important;

http://jsfiddle.net/Xpe9V/521/