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

最新推荐文章于 2025-08-14 13:49:13 发布

?Briella

最新推荐文章于 2025-08-14 13:49:13 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/victorHomePage/blog/169514

本文介绍如何使用HTML5的-webkit-mask-image属性实现图标颜色的动态切换效果，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

注（

原创地址：http://www.cnblogs.com/mlzs/archive/2013/06/09/3128318.html

原创作者：魔狼再世

）

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

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

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

代码如下：

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

css如下：

.ico {
    -webkit-mask-size:100%;
    background-color:#6A6A6A;
    background-image:none;
}
.maps {
    -webkit-mask-image:url('../image/icon/maps.png');
}
.roseRed {
    background-color:#DE3554;
}

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

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

.home .x-button {
    background-image:none;
    background-color:transparent;
    border:0;
}
.home .x-button .x-button-label {
    font-weight:normal;
    color:#A8A8A8;
}

转载于:https://my.oschina.net/victorHomePage/blog/169514