Sencha Touch List 自定义披露图标答案

【问题标题】：Sencha Touch List Custom Disclosure IconSencha Touch List 自定义披露图标
【发布时间】：2014-05-12 10:43:31
【问题描述】：

我有自定义图标显示为列表组件的披露图标。我做了CSS来做。我的图标颜色是灰色的。它显示为蓝色。

我的 CSS：

.myList .x-list-disclosure
{
    width:48px !important;
    height:48px !important;
    top:0px !important;
    margin:1em 0 0 0 !important;
    background-image:none !important;
    color:transparent !important;
    -webkit-mask-box-image:url('../resources/images/next.png') !important;
    -webkit-mask:none !important;
}

.x-list .x-list-disclosure:before {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  content:'';
  font-family:$font-family;
  color:transparent;
  font-size:48px;
  text-align:center;
  line-height:48px;
  text-shadow:none !important;
}

问题：我的图标显示蓝色（即使是浅灰色）是什么原因
我使用的 CSS 有什么问题。

【问题讨论】：

标签： css sencha-touch-2 disclosure

【解决方案1】：

这是因为，在 .x-list .x-list-disclosure 类的煎茶中，background-color 是 #006bb6。当您使用-webkit-mask-box-image 时，它是透明的，显示背景颜色，即蓝色而不是浅灰色。因此，如果您想更改图标的颜色，请执行以下操作：

.myList .x-list-disclosure {
    background-color: grey !important;
}

希望我的解释能满足您的查询。

【讨论】：