sencha touch 彩色图标按钮(button+ico)

来源：互联网发布：丽水司法拍卖淘宝网编辑：程序博客网时间：2024/04/30 06:51

里面的图标看起来五颜六色，而且可以很方便的切换各种颜色出来。

在这里利用了html5的一些特性，其实这些ico的原型都是这样的

这个原型图片名为：maps.png

代码如下：

1               xtype: 'button',
                text: '装修招标',
                iconAlign: 'top',
                iconCls: 'maps ico roseRed'

css如下：

 1 .ico { 2     -webkit-mask-size:100%; 3     background-color:#6A6A6A; 4     background-image:none; 5 } 6 .maps { 7     -webkit-mask-image:url('../image/icon/maps.png'); 8 } 9 .roseRed {10     background-color:#DE3554;11 }

请自行谷歌-webkit-mask-image的作用。

补充一下，css还需要加上。用来去掉他本身的背景色和边框

1 .home .x-button {2     background-image:none;3     background-color:transparent;4     border:0;5 }6 .home .x-button .x-button-label {7     font-weight:normal;8     color:#A8A8A8;9 }