diff --git a/dist/bundle.css b/dist/bundle.css
index 8889bf1a1..30560d2ab 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -6542,149 +6542,149 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 .check-box-icon .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:hover .x-icon,
 .check-box-icon.hover .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:hover .x-icon.hack,
 .check-box-icon.hover .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon.active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_active.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_active.png');
   _background: none;
 }
 .check-box-icon.disabled .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable.png');
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable2.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable2.png');
   _background: none;
 }
 .radio-icon .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:hover .x-icon,
 .radio-icon.hover .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:hover .x-icon.hack,
 .radio-icon.hover .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon.active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_active.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_active.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_active.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_active.png');
   _background: none;
 }
 .radio-icon.disabled .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable.png');
   _background: none;
 }
 .radio-icon.disabled.active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable2.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled.active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable2.png');
   _background: none;
 }
@@ -6702,39 +6702,111 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 .slider-icon .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png');
   _background: none;
 }
 .slider-icon:hover .x-icon,
 .slider-icon.hover .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_active_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon:hover .x-icon.hack,
 .slider-icon.hover .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_active_small.png');
   _background: none;
 }
 .slider-icon.disabled .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon.disabled .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png');
   _background: none;
 }
+.auto-color-icon .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_normal.png');
+  _background: none;
+}
+.auto-color-icon.active .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_select.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.active .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_select.png');
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_disable.png');
+  _background: none;
+}
+.trans-color-icon .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_normal.png');
+  _background: none;
+}
+.trans-color-icon.active .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_select.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.active .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_select.png');
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_disable.png');
+  _background: none;
+}
diff --git a/dist/bundle.js b/dist/bundle.js
index eac26dbe7..8afaae839 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -76207,15 +76207,20 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         this.B = Ws[2];
 
         this.none = BI.createWidget({
-            type: "bi.checkbox",
+            type: "bi.icon_button",
+            cls: "auto-color-icon",
+            width: 16,
+            height: 16,
+            iconWidth: 16,
+            iconHeight: 16,
             title: BI.i18nText("BI-Basic_Auto")
         });
-        this.none.on(BI.Checkbox.EVENT_CHANGE, function () {
+        this.none.on(BI.IconButton.EVENT_CHANGE, function () {
             if (this.isSelected()) {
                 self.lastColor = self.getValue();
                 self.setValue("");
             } else {
-                self.setValue(self.lastColor || "#000000");
+                self.setValue(self.lastColor || "#ffffff");
             }
             if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
                 self.colorShow.element.css("background-color", self.getValue());
@@ -76224,15 +76229,23 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         });
 
         this.transparent = BI.createWidget({
-            type: "bi.checkbox",
+            type: "bi.icon_button",
+            cls: "trans-color-icon",
+            width: 16,
+            height: 16,
+            iconWidth: 16,
+            iconHeight: 16,
             title: BI.i18nText("BI-Transparent_Color")
         });
-        this.transparent.on(BI.Checkbox.EVENT_CHANGE, function () {
+        this.transparent.on(BI.IconButton.EVENT_CHANGE, function () {
             if (this.isSelected()) {
                 self.lastColor = self.getValue();
                 self.setValue("transparent");
             } else {
-                self.setValue(self.lastColor || "#000000");
+                if (self.lastColor === "transparent") {
+                    self.lastColor = "";
+                }
+                self.setValue(self.lastColor || "#ffffff");
             }
             if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
                 self.colorShow.element.css("background-color", self.getValue());
@@ -76283,10 +76296,21 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         });
     },
 
+    _showPreColor: function (color) {
+        if (color === "") {
+            this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorShow.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background");
+        } else {
+            this.colorShow.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
+        }
+    },
+
     setValue: function (color) {
         if (color === "transparent") {
             this.transparent.setSelected(true);
             this.none.setSelected(false);
+            this._showPreColor("transparent");
             this.R.setValue("");
             this.G.setValue("");
             this.B.setValue("");
@@ -76299,7 +76323,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             this.none.setSelected(false);
         }
         this.transparent.setSelected(false);
-        this.colorShow.element.css("background-color", color);
+        this._showPreColor(color);
         var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
         this.R.setValue(BI.isNull(json.r) ? "" : json.r);
         this.G.setValue(BI.isNull(json.g) ? "" : json.g);
diff --git a/dist/case.js b/dist/case.js
index 5fdf73748..d6c501c17 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -4267,15 +4267,20 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         this.B = Ws[2];
 
         this.none = BI.createWidget({
-            type: "bi.checkbox",
+            type: "bi.icon_button",
+            cls: "auto-color-icon",
+            width: 16,
+            height: 16,
+            iconWidth: 16,
+            iconHeight: 16,
             title: BI.i18nText("BI-Basic_Auto")
         });
-        this.none.on(BI.Checkbox.EVENT_CHANGE, function () {
+        this.none.on(BI.IconButton.EVENT_CHANGE, function () {
             if (this.isSelected()) {
                 self.lastColor = self.getValue();
                 self.setValue("");
             } else {
-                self.setValue(self.lastColor || "#000000");
+                self.setValue(self.lastColor || "#ffffff");
             }
             if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
                 self.colorShow.element.css("background-color", self.getValue());
@@ -4284,15 +4289,23 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         });
 
         this.transparent = BI.createWidget({
-            type: "bi.checkbox",
+            type: "bi.icon_button",
+            cls: "trans-color-icon",
+            width: 16,
+            height: 16,
+            iconWidth: 16,
+            iconHeight: 16,
             title: BI.i18nText("BI-Transparent_Color")
         });
-        this.transparent.on(BI.Checkbox.EVENT_CHANGE, function () {
+        this.transparent.on(BI.IconButton.EVENT_CHANGE, function () {
             if (this.isSelected()) {
                 self.lastColor = self.getValue();
                 self.setValue("transparent");
             } else {
-                self.setValue(self.lastColor || "#000000");
+                if (self.lastColor === "transparent") {
+                    self.lastColor = "";
+                }
+                self.setValue(self.lastColor || "#ffffff");
             }
             if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
                 self.colorShow.element.css("background-color", self.getValue());
@@ -4343,10 +4356,21 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         });
     },
 
+    _showPreColor: function (color) {
+        if (color === "") {
+            this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorShow.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background");
+        } else {
+            this.colorShow.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
+        }
+    },
+
     setValue: function (color) {
         if (color === "transparent") {
             this.transparent.setSelected(true);
             this.none.setSelected(false);
+            this._showPreColor("transparent");
             this.R.setValue("");
             this.G.setValue("");
             this.B.setValue("");
@@ -4359,7 +4383,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             this.none.setSelected(false);
         }
         this.transparent.setSelected(false);
-        this.colorShow.element.css("background-color", color);
+        this._showPreColor(color);
         var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
         this.R.setValue(BI.isNull(json.r) ? "" : json.r);
         this.G.setValue(BI.isNull(json.g) ? "" : json.g);
diff --git a/dist/fineui.css b/dist/fineui.css
index bdbde73f8..1b8234302 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -6542,149 +6542,149 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 .check-box-icon .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:hover .x-icon,
 .check-box-icon.hover .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:hover .x-icon.hack,
 .check-box-icon.hover .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon.active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_active.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_active.png');
   _background: none;
 }
 .check-box-icon.disabled .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable.png');
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable2.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable2.png');
   _background: none;
 }
 .radio-icon .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:hover .x-icon,
 .radio-icon.hover .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:hover .x-icon.hack,
 .radio-icon.hover .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon.active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_active.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_active.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_active.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_active.png');
   _background: none;
 }
 .radio-icon.disabled .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_disable.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_disable.png');
   _background: none;
 }
 .radio-icon.disabled.active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_disable2.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled.active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_disable2.png');
   _background: none;
 }
@@ -6702,39 +6702,111 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 .slider-icon .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png');
   _background: none;
 }
 .slider-icon:hover .x-icon,
 .slider-icon.hover .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/slider_active_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon:hover .x-icon.hack,
 .slider-icon.hover .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/slider_active_small.png');
   _background: none;
 }
 .slider-icon.disabled .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon.disabled .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png');
   _background: none;
 }
+.auto-color-icon .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/auto_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/auto_normal.png');
+  _background: none;
+}
+.auto-color-icon.active .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/auto_select.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.active .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/auto_select.png');
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/auto_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/auto_disable.png');
+  _background: none;
+}
+.trans-color-icon .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/trans_normal.png');
+  _background: none;
+}
+.trans-color-icon.active .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/trans_select.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.active .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/trans_select.png');
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/trans_disable.png');
+  _background: none;
+}
diff --git a/dist/images/1x/background/auto_color.png b/dist/images/1x/background/auto_color.png
index 63b3edf95..ee66607bb 100644
Binary files a/dist/images/1x/background/auto_color.png and b/dist/images/1x/background/auto_color.png differ
diff --git a/dist/images/1x/background/trans_color.png b/dist/images/1x/background/trans_color.png
index 8fa44929c..f32144f25 100644
Binary files a/dist/images/1x/background/trans_color.png and b/dist/images/1x/background/trans_color.png differ
diff --git a/dist/images/1x/icon/auto_disable.png b/dist/images/1x/icon/auto_disable.png
new file mode 100644
index 000000000..fe1fb3035
Binary files /dev/null and b/dist/images/1x/icon/auto_disable.png differ
diff --git a/dist/images/1x/icon/auto_normal.png b/dist/images/1x/icon/auto_normal.png
new file mode 100644
index 000000000..2018e4725
Binary files /dev/null and b/dist/images/1x/icon/auto_normal.png differ
diff --git a/dist/images/1x/icon/auto_select.png b/dist/images/1x/icon/auto_select.png
new file mode 100644
index 000000000..344b849c1
Binary files /dev/null and b/dist/images/1x/icon/auto_select.png differ
diff --git a/dist/images/1x/icon/trans_disable.png b/dist/images/1x/icon/trans_disable.png
new file mode 100644
index 000000000..c070eb9bb
Binary files /dev/null and b/dist/images/1x/icon/trans_disable.png differ
diff --git a/dist/images/1x/icon/trans_normal .png b/dist/images/1x/icon/trans_normal .png
new file mode 100644
index 000000000..4f63b4314
Binary files /dev/null and b/dist/images/1x/icon/trans_normal .png differ
diff --git a/dist/images/1x/icon/trans_select .png b/dist/images/1x/icon/trans_select .png
new file mode 100644
index 000000000..1e3837a5f
Binary files /dev/null and b/dist/images/1x/icon/trans_select .png differ
diff --git a/dist/images/2x/background/auto_color.png b/dist/images/2x/background/auto_color.png
index fc976e459..ab53975a1 100644
Binary files a/dist/images/2x/background/auto_color.png and b/dist/images/2x/background/auto_color.png differ
diff --git a/dist/images/2x/background/trans_color.png b/dist/images/2x/background/trans_color.png
index 262626f21..663a84262 100644
Binary files a/dist/images/2x/background/trans_color.png and b/dist/images/2x/background/trans_color.png differ
diff --git a/dist/images/2x/icon/auto_disable.png b/dist/images/2x/icon/auto_disable.png
new file mode 100644
index 000000000..8fca5adc1
Binary files /dev/null and b/dist/images/2x/icon/auto_disable.png differ
diff --git a/dist/images/2x/icon/auto_normal.png b/dist/images/2x/icon/auto_normal.png
new file mode 100644
index 000000000..527212c10
Binary files /dev/null and b/dist/images/2x/icon/auto_normal.png differ
diff --git a/dist/images/2x/icon/auto_select.png b/dist/images/2x/icon/auto_select.png
new file mode 100644
index 000000000..49423cac0
Binary files /dev/null and b/dist/images/2x/icon/auto_select.png differ
diff --git a/dist/images/2x/icon/trans_disable.png b/dist/images/2x/icon/trans_disable.png
new file mode 100644
index 000000000..593ce3a62
Binary files /dev/null and b/dist/images/2x/icon/trans_disable.png differ
diff --git a/dist/images/2x/icon/trans_normal.png b/dist/images/2x/icon/trans_normal.png
new file mode 100644
index 000000000..c02d399ad
Binary files /dev/null and b/dist/images/2x/icon/trans_normal.png differ
diff --git a/dist/images/2x/icon/trans_select.png b/dist/images/2x/icon/trans_select.png
new file mode 100644
index 000000000..10ee257ae
Binary files /dev/null and b/dist/images/2x/icon/trans_select.png differ
diff --git a/dist/resource.css b/dist/resource.css
index 73c173107..9fce0a13d 100644
--- a/dist/resource.css
+++ b/dist/resource.css
@@ -1406,149 +1406,149 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 .check-box-icon .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon .x-icon.hack {
-  background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:hover .x-icon,
 .check-box-icon.hover .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:hover .x-icon.hack,
 .check-box-icon.hover .x-icon.hack {
-  background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:active .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:active .x-icon.hack {
-  background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon.active .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.active .x-icon.hack {
-  background: url('images/1x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
   _background: none;
 }
 .check-box-icon.disabled .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled .x-icon.hack {
-  background: url('images/1x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable.png');
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable2.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon.hack {
-  background: url('images/1x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable2.png');
   _background: none;
 }
 .radio-icon .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon .x-icon.hack {
-  background: url('images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:hover .x-icon,
 .radio-icon.hover .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:hover .x-icon.hack,
 .radio-icon.hover .x-icon.hack {
-  background: url('images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:active .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:active .x-icon.hack {
-  background: url('images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon.active .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_active.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_active.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.active .x-icon.hack {
-  background: url('images/1x/icon/radio_active.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_active.png');
   _background: none;
 }
 .radio-icon.disabled .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled .x-icon.hack {
-  background: url('images/1x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable.png');
   _background: none;
 }
 .radio-icon.disabled.active .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable2.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled.active .x-icon.hack {
-  background: url('images/1x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable2.png');
   _background: none;
 }
@@ -1566,39 +1566,111 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 .slider-icon .x-icon {
   display: block;
-  background: url('images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon .x-icon.hack {
-  background: url('images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_normal_small.png');
   _background: none;
 }
 .slider-icon:hover .x-icon,
 .slider-icon.hover .x-icon {
   display: block;
-  background: url('images/2x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('images/2x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_active_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon:hover .x-icon.hack,
 .slider-icon.hover .x-icon.hack {
-  background: url('images/1x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('images/1x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_active_small.png');
   _background: none;
 }
 .slider-icon.disabled .x-icon {
   display: block;
-  background: url('images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon.disabled .x-icon.hack {
-  background: url('images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_normal_small.png');
   _background: none;
 }
+.auto-color-icon .x-icon {
+  display: block;
+  background: url('images/2x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon .x-icon.hack {
+  background: url('images/1x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_normal.png');
+  _background: none;
+}
+.auto-color-icon.active .x-icon {
+  display: block;
+  background: url('images/2x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_select.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.active .x-icon.hack {
+  background: url('images/1x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_select.png');
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon {
+  display: block;
+  background: url('images/2x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon.hack {
+  background: url('images/1x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_disable.png');
+  _background: none;
+}
+.trans-color-icon .x-icon {
+  display: block;
+  background: url('images/2x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon .x-icon.hack {
+  background: url('images/1x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_normal.png');
+  _background: none;
+}
+.trans-color-icon.active .x-icon {
+  display: block;
+  background: url('images/2x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_select.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.active .x-icon.hack {
+  background: url('images/1x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_select.png');
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon {
+  display: block;
+  background: url('images/2x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon.hack {
+  background: url('images/1x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_disable.png');
+  _background: none;
+}
diff --git a/public/css/icon.css b/public/css/icon.css
index 1c9746697..c014e5ba1 100644
--- a/public/css/icon.css
+++ b/public/css/icon.css
@@ -264,149 +264,149 @@
 }
 .check-box-icon .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:hover .x-icon,
 .check-box-icon.hover .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:hover .x-icon.hack,
 .check-box-icon.hover .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon.active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_active.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_active.png');
   _background: none;
 }
 .check-box-icon.disabled .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable.png');
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/check_box_disable2.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/check_box_disable2.png');
   _background: none;
 }
 .radio-icon .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:hover .x-icon,
 .radio-icon.hover .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:hover .x-icon.hack,
 .radio-icon.hover .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon.active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_active.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_active.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_active.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_active.png');
   _background: none;
 }
 .radio-icon.disabled .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable.png');
   _background: none;
 }
 .radio-icon.disabled.active .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/radio_disable2.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled.active .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/radio_disable2.png');
   _background: none;
 }
@@ -424,39 +424,111 @@
 }
 .slider-icon .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png');
   _background: none;
 }
 .slider-icon:hover .x-icon,
 .slider-icon.hover .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_active_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon:hover .x-icon.hack,
 .slider-icon.hover .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_active_small.png');
   _background: none;
 }
 .slider-icon.disabled .x-icon {
   display: block;
-  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon.disabled .x-icon.hack {
-  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/slider_normal_small.png');
   _background: none;
 }
+.auto-color-icon .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_normal.png');
+  _background: none;
+}
+.auto-color-icon.active .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_select.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.active .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_select.png');
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/auto_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/auto_disable.png');
+  _background: none;
+}
+.trans-color-icon .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_normal.png');
+  _background: none;
+}
+.trans-color-icon.active .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_select.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.active .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_select.png');
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon {
+  display: block;
+  background: url('https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/2x/icon/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon.hack {
+  background: url('https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/icon/trans_disable.png');
+  _background: none;
+}
diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.js b/src/case/colorchooser/colorpicker/editor.colorpicker.js
index 8b040df4a..96c4da102 100644
--- a/src/case/colorchooser/colorpicker/editor.colorpicker.js
+++ b/src/case/colorchooser/colorpicker/editor.colorpicker.js
@@ -56,15 +56,20 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         this.B = Ws[2];
 
         this.none = BI.createWidget({
-            type: "bi.checkbox",
+            type: "bi.icon_button",
+            cls: "auto-color-icon",
+            width: 16,
+            height: 16,
+            iconWidth: 16,
+            iconHeight: 16,
             title: BI.i18nText("BI-Basic_Auto")
         });
-        this.none.on(BI.Checkbox.EVENT_CHANGE, function () {
+        this.none.on(BI.IconButton.EVENT_CHANGE, function () {
             if (this.isSelected()) {
                 self.lastColor = self.getValue();
                 self.setValue("");
             } else {
-                self.setValue(self.lastColor || "#000000");
+                self.setValue(self.lastColor || "#ffffff");
             }
             if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
                 self.colorShow.element.css("background-color", self.getValue());
@@ -73,15 +78,23 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         });
 
         this.transparent = BI.createWidget({
-            type: "bi.checkbox",
+            type: "bi.icon_button",
+            cls: "trans-color-icon",
+            width: 16,
+            height: 16,
+            iconWidth: 16,
+            iconHeight: 16,
             title: BI.i18nText("BI-Transparent_Color")
         });
-        this.transparent.on(BI.Checkbox.EVENT_CHANGE, function () {
+        this.transparent.on(BI.IconButton.EVENT_CHANGE, function () {
             if (this.isSelected()) {
                 self.lastColor = self.getValue();
                 self.setValue("transparent");
             } else {
-                self.setValue(self.lastColor || "#000000");
+                if (self.lastColor === "transparent") {
+                    self.lastColor = "";
+                }
+                self.setValue(self.lastColor || "#ffffff");
             }
             if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
                 self.colorShow.element.css("background-color", self.getValue());
@@ -132,10 +145,21 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         });
     },
 
+    _showPreColor: function (color) {
+        if (color === "") {
+            this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorShow.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background");
+        } else {
+            this.colorShow.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
+        }
+    },
+
     setValue: function (color) {
         if (color === "transparent") {
             this.transparent.setSelected(true);
             this.none.setSelected(false);
+            this._showPreColor("transparent");
             this.R.setValue("");
             this.G.setValue("");
             this.B.setValue("");
@@ -148,7 +172,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             this.none.setSelected(false);
         }
         this.transparent.setSelected(false);
-        this.colorShow.element.css("background-color", color);
+        this._showPreColor(color);
         var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
         this.R.setValue(BI.isNull(json.r) ? "" : json.r);
         this.G.setValue(BI.isNull(json.g) ? "" : json.g);
diff --git a/src/css/resource/icon.css b/src/css/resource/icon.css
index 683ff4735..480c0bf40 100644
--- a/src/css/resource/icon.css
+++ b/src/css/resource/icon.css
@@ -264,149 +264,149 @@
 }
 .check-box-icon .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon .x-icon.hack {
-  background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:hover .x-icon,
 .check-box-icon.hover .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:hover .x-icon.hack,
 .check-box-icon.hover .x-icon.hack {
-  background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:active .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:active .x-icon.hack {
-  background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon.active .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.active .x-icon.hack {
-  background: url('images/1x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
   _background: none;
 }
 .check-box-icon.disabled .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled .x-icon.hack {
-  background: url('images/1x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable.png');
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon {
   display: block;
-  background: url('images/2x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('images/2x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable2.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon.hack {
-  background: url('images/1x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('images/1x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable2.png');
   _background: none;
 }
 .radio-icon .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon .x-icon.hack {
-  background: url('images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:hover .x-icon,
 .radio-icon.hover .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:hover .x-icon.hack,
 .radio-icon.hover .x-icon.hack {
-  background: url('images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:active .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:active .x-icon.hack {
-  background: url('images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon.active .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_active.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_active.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.active .x-icon.hack {
-  background: url('images/1x/icon/radio_active.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_active.png');
   _background: none;
 }
 .radio-icon.disabled .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled .x-icon.hack {
-  background: url('images/1x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable.png');
   _background: none;
 }
 .radio-icon.disabled.active .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('images/2x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable2.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled.active .x-icon.hack {
-  background: url('images/1x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('images/1x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable2.png');
   _background: none;
 }
@@ -424,39 +424,111 @@
 }
 .slider-icon .x-icon {
   display: block;
-  background: url('images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon .x-icon.hack {
-  background: url('images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_normal_small.png');
   _background: none;
 }
 .slider-icon:hover .x-icon,
 .slider-icon.hover .x-icon {
   display: block;
-  background: url('images/2x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('images/2x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_active_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon:hover .x-icon.hack,
 .slider-icon.hover .x-icon.hack {
-  background: url('images/1x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('images/1x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_active_small.png');
   _background: none;
 }
 .slider-icon.disabled .x-icon {
   display: block;
-  background: url('images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon.disabled .x-icon.hack {
-  background: url('images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_normal_small.png');
   _background: none;
 }
+.auto-color-icon .x-icon {
+  display: block;
+  background: url('images/2x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon .x-icon.hack {
+  background: url('images/1x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_normal.png');
+  _background: none;
+}
+.auto-color-icon.active .x-icon {
+  display: block;
+  background: url('images/2x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_select.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.active .x-icon.hack {
+  background: url('images/1x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_select.png');
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon {
+  display: block;
+  background: url('images/2x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon.hack {
+  background: url('images/1x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_disable.png');
+  _background: none;
+}
+.trans-color-icon .x-icon {
+  display: block;
+  background: url('images/2x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon .x-icon.hack {
+  background: url('images/1x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_normal.png');
+  _background: none;
+}
+.trans-color-icon.active .x-icon {
+  display: block;
+  background: url('images/2x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_select.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.active .x-icon.hack {
+  background: url('images/1x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_select.png');
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon {
+  display: block;
+  background: url('images/2x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon.hack {
+  background: url('images/1x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_disable.png');
+  _background: none;
+}
diff --git a/src/less/image.less b/src/less/image.less
index a8e16e88f..867695e0c 100644
--- a/src/less/image.less
+++ b/src/less/image.less
@@ -32,71 +32,71 @@
 }
 
 // 有悬浮效果的icon
-.icon_hover(@class, @iconPath, @hoverPath: @iconPath) {
+.icon_hover(@class, @iconPath, @hoverPath: @iconPath, @disablePath: @iconPath) {
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@iconPath);
       }
     }
     &:hover .x-icon,
     &.hover .x-icon {
       display: block;
-      .image2xPath(@hoverPath, 0, 0);
+      .image2xPath(@hoverPath);
       &.hack {
-        .imagePath(@hoverPath, 0, 0);
+        .imagePath(@hoverPath);
       }
     }
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@disablePath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@disablePath);
       }
     }
   }
 }
 
 // 有悬浮、激活(选中)的icon
-.icon_hover_active(@class, @iconPath, @hoverPath: @iconPath, @activePath: @iconPath) {
+.icon_hover_active(@class, @iconPath, @hoverPath: @iconPath, @activePath: @iconPath, @disablePath: @iconPath) {
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@iconPath);
       }
     }
     &:hover .x-icon,
     &.hover .x-icon {
       display: block;
-      .image2xPath(@hoverPath, 0, 0);
+      .image2xPath(@hoverPath);
       &.hack {
-        .imagePath(@hoverPath, 0, 0);
+        .imagePath(@hoverPath);
       }
     }
     &:active .x-icon,
     &.active .x-icon {
       display: block;
-      .image2xPath(@activePath, 0, 0);
+      .image2xPath(@activePath);
       &.hack {
-        .imagePath(@activePath, 0, 0);
+        .imagePath(@activePath);
       }
     }
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@disablePath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@disablePath);
       }
     }
   }
 }
 
-// 有悬浮、选中的icon
-.icon_select(@class, @iconPath, @selectPath: @iconPath) {
+// 只有有选中的icon
+.icon_select(@class, @iconPath, @selectPath: @iconPath, @disablePath: @iconPath) {
   .@{class} {
     & .x-icon {
       display: block;
@@ -114,9 +114,9 @@
     }
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@iconPath);
+      .image2xPath(@disablePath);
       &.hack {
-        .imagePath(@iconPath);
+        .imagePath(@disablePath);
       }
     }
   }
@@ -127,17 +127,17 @@
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@iconPath);
       }
     }
 
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@disablePath, 0, 0);
+      .image2xPath(@disablePath);
       &.hack {
-        .imagePath(@disablePath, 0, 0);
+        .imagePath(@disablePath);
       }
     }
   }
@@ -148,26 +148,26 @@
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@iconPath);
       }
     }
 
     &:hover .x-icon,
     &.hover .x-icon {
       display: block;
-      .image2xPath(@hoverPath, 0, 0);
+      .image2xPath(@hoverPath);
       &.hack {
-        .imagePath(@hoverPath, 0, 0);
+        .imagePath(@hoverPath);
       }
     }
 
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@disablePath, 0, 0);
+      .image2xPath(@disablePath);
       &.hack {
-        .imagePath(@disablePath, 0, 0);
+        .imagePath(@disablePath);
       }
     }
   }
@@ -178,35 +178,35 @@
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@iconPath);
       }
     }
 
     &:hover .x-icon,
     &.hover .x-icon {
       display: block;
-      .image2xPath(@hoverPath, 0, 0);
+      .image2xPath(@hoverPath);
       &.hack {
-        .imagePath(@hoverPath, 0, 0);
+        .imagePath(@hoverPath);
       }
     }
 
     &:active .x-icon,
     &.active .x-icon {
       display: block;
-      .image2xPath(@activePath, 0, 0);
+      .image2xPath(@activePath);
       &.hack {
-        .imagePath(@activePath, 0, 0);
+        .imagePath(@activePath);
       }
     }
 
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@disablePath, 0, 0);
+      .image2xPath(@disablePath);
       &.hack {
-        .imagePath(@disablePath, 0, 0);
+        .imagePath(@disablePath);
       }
     }
   }
@@ -217,42 +217,42 @@
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@iconPath);
       }
     }
 
     &:hover .x-icon,
     &.hover .x-icon {
       display: block;
-      .image2xPath(@hoverPath, 0, 0);
+      .image2xPath(@hoverPath);
       &.hack {
-        .imagePath(@hoverPath, 0, 0);
+        .imagePath(@hoverPath);
       }
     }
 
     &:active .x-icon {
       display: block;
-      .image2xPath(@activePath, 0, 0);
+      .image2xPath(@activePath);
       &.hack {
-        .imagePath(@activePath, 0, 0);
+        .imagePath(@activePath);
       }
     }
 
     &.active .x-icon {
       display: block;
-      .image2xPath(@selectedPath, 0, 0);
+      .image2xPath(@selectedPath);
       &.hack {
-        .imagePath(@selectedPath, 0, 0);
+        .imagePath(@selectedPath);
       }
     }
 
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@disablePath, 0, 0);
+      .image2xPath(@disablePath);
       &.hack {
-        .imagePath(@disablePath, 0, 0);
+        .imagePath(@disablePath);
       }
     }
   }
@@ -263,48 +263,48 @@
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@iconPath);
       }
     }
     &:hover .x-icon,
     &.hover .x-icon {
       display: block;
-      .image2xPath(@hoverPath, 0, 0);
+      .image2xPath(@hoverPath);
       &.hack {
-        .imagePath(@hoverPath, 0, 0);
+        .imagePath(@hoverPath);
       }
     }
 
     &:active .x-icon {
       display: block;
-      .image2xPath(@activePath, 0, 0);
+      .image2xPath(@activePath);
       &.hack {
-        .imagePath(@activePath, 0, 0);
+        .imagePath(@activePath);
       }
     }
 
     &.active .x-icon {
       display: block;
-      .image2xPath(@selectedPath, 0, 0);
+      .image2xPath(@selectedPath);
       &.hack {
-        .imagePath(@selectedPath, 0, 0);
+        .imagePath(@selectedPath);
       }
     }
 
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@disablePath, 0, 0);
+      .image2xPath(@disablePath);
       &.hack {
-        .imagePath(@disablePath, 0, 0);
+        .imagePath(@disablePath);
       }
     }
     &.disabled.active .x-icon {
       display: block;
-      .image2xPath(@activeDisablePath, 0, 0);
+      .image2xPath(@activeDisablePath);
       &.hack {
-        .imagePath(@activeDisablePath, 0, 0);
+        .imagePath(@activeDisablePath);
       }
     }
   }
diff --git a/src/less/lib/icon.less b/src/less/lib/icon.less
index 52848a019..efb44cb37 100644
--- a/src/less/lib/icon.less
+++ b/src/less/lib/icon.less
@@ -45,3 +45,11 @@
 //滑块
 @icon-slider-normal: "icon/slider_normal_small.png";
 @icon-slider-active: "icon/slider_active_small.png";
+
+//颜色自动、透明
+@icon-auto-normal: "icon/auto_normal.png";
+@icon-auto-select: "icon/auto_select.png";
+@icon-auto-disable: "icon/auto_disable.png";
+@icon-trans-normal: "icon/trans_normal.png";
+@icon-trans-select: "icon/trans_select.png";
+@icon-trans-disable: "icon/trans_disable.png";
\ No newline at end of file
diff --git a/src/less/resource/icon.less b/src/less/resource/icon.less
index 38b82ea16..8dbbb7c03 100644
--- a/src/less/resource/icon.less
+++ b/src/less/resource/icon.less
@@ -69,3 +69,6 @@
 //滑块
 .icon_hover(slider-icon, @icon-slider-normal, @icon-slider-active);
 
+//颜色自动、透明
+.icon_select(auto-color-icon, @icon-auto-normal, @icon-auto-select, @icon-auto-disable);
+.icon_select(trans-color-icon, @icon-trans-normal, @icon-trans-select, @icon-trans-disable);
diff --git a/ui/css/icon.css b/ui/css/icon.css
index ef15933ec..23cb35be0 100644
--- a/ui/css/icon.css
+++ b/ui/css/icon.css
@@ -264,149 +264,149 @@
 }
 .check-box-icon .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:hover .x-icon,
 .check-box-icon.hover .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:hover .x-icon.hack,
 .check-box-icon.hover .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon:active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon:active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_normal.png');
   _background: none;
 }
 .check-box-icon.active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_active.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_active.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_active.png');
   _background: none;
 }
 .check-box-icon.disabled .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable.png');
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/check_box_disable2.png');
   background-size: contain;
   _background: none;
 }
 .check-box-icon.disabled.active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable2.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/check_box_disable2.png');
   _background: none;
 }
 .radio-icon .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:hover .x-icon,
 .radio-icon.hover .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:hover .x-icon.hack,
 .radio-icon.hover .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon:active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon:active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_normal.png');
   _background: none;
 }
 .radio-icon.active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_active.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_active.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_active.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_active.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_active.png');
   _background: none;
 }
 .radio-icon.disabled .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_disable.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_disable.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_disable.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_disable.png');
   _background: none;
 }
 .radio-icon.disabled.active .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/radio_disable2.png');
   background-size: contain;
   _background: none;
 }
 .radio-icon.disabled.active .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_disable2.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/radio_disable2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/radio_disable2.png');
   _background: none;
 }
@@ -424,39 +424,111 @@
 }
 .slider-icon .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png');
   _background: none;
 }
 .slider-icon:hover .x-icon,
 .slider-icon.hover .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/slider_active_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon:hover .x-icon.hack,
 .slider-icon.hover .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_active_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_active_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/slider_active_small.png');
   _background: none;
 }
 .slider-icon.disabled .x-icon {
   display: block;
-  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/slider_normal_small.png');
   background-size: contain;
   _background: none;
 }
 .slider-icon.disabled .x-icon.hack {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png') no-repeat 0 0;
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/slider_normal_small.png');
   _background: none;
 }
+.auto-color-icon .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/auto_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/auto_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/auto_normal.png');
+  _background: none;
+}
+.auto-color-icon.active .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/auto_select.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.active .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/auto_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/auto_select.png');
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/auto_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-icon.disabled .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/auto_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/auto_disable.png');
+  _background: none;
+}
+.trans-color-icon .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/trans_normal.png');
+  _background: none;
+}
+.trans-color-icon.active .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/trans_select.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.active .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/trans_select.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/trans_select.png');
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon {
+  display: block;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/2x/icon/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-icon.disabled .x-icon.hack {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources?path=/com/fr/web/ui/images/1x/icon/trans_disable.png');
+  _background: none;
+}