按钮的背景图片答案

【问题标题】：Background image of button按钮的背景图片
【发布时间】：2013-04-15 13:31:40
【问题描述】：

我正在尝试设置按钮的图像，但它没有覆盖整个按钮。我的意思是，按钮的背景仍然可见。

我试图在运行时通过为循环中的每个按钮提供不同的图像来做到这一点。

这里是：

for(var i=0; i<tvStore.getCount(); i++)
   {
     var aButton = Ext.create('Ext.Button',
     { 
       margin:8,
      id:'button'+i,
      itemId:i,
      style: 'width: 110px;height:110px;background-image:url(someRandomWebURLToImage) !important',

但图像并未覆盖所有按钮。或者如果图像无法拉伸，那么如何使按钮的背景透明？

谢谢，

【问题讨论】：

标签： extjs sencha-touch sencha-architect sencha-touch-2.1

【解决方案1】：

您可以使用iconCls 属性来指定CSS，如下所示：

{
    xtype           : 'button',
    iconCls         : 'cart',
    text            : 'Add to Cart',
    iconMask        : true,
    padding         : 10,
    margin          : 10,
    id              : 'addToBagBtn'
}

CSS 文件应该有：

.x-tab .x-button-icon.cart, .x-button .x-button-icon.x-icon-mask.cart {
    -webkit-mask-image: url('../../touch/resources/themes/images/default/pictos/shop1.png');
}

【讨论】：