diff --git a/bi/base.css b/bi/base.css
index 8f015cc20e..e304763622 100644
--- a/bi/base.css
+++ b/bi/base.css
@@ -6,9 +6,6 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
-.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
-}
 .bi-color-picker-button .color-picker-button-mask {
   border: 1px solid #1a1a1a;
 }
diff --git a/bi/case.js b/bi/case.js
index d6234e6651..91d64d3a36 100644
--- a/bi/case.js
+++ b/bi/case.js
@@ -3983,9 +3983,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
         if (color === "") {
-            this.colorContainer.element.css("background-color", "").addClass("none-color")
+            this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background")
         } else {
-            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+            this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
         }
     }
 });
diff --git a/docs/base.css b/docs/base.css
index 8f015cc20e..e304763622 100644
--- a/docs/base.css
+++ b/docs/base.css
@@ -6,9 +6,6 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
-.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
-}
 .bi-color-picker-button .color-picker-button-mask {
   border: 1px solid #1a1a1a;
 }
diff --git a/docs/case.js b/docs/case.js
index d6234e6651..91d64d3a36 100644
--- a/docs/case.js
+++ b/docs/case.js
@@ -3983,9 +3983,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
         if (color === "") {
-            this.colorContainer.element.css("background-color", "").addClass("none-color")
+            this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background")
         } else {
-            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+            this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
         }
     }
 });
diff --git a/src/case/colorchooser/colorchooser.trigger.js b/src/case/colorchooser/colorchooser.trigger.js
index 4b61bd908d..55213bc7f6 100644
--- a/src/case/colorchooser/colorchooser.trigger.js
+++ b/src/case/colorchooser/colorchooser.trigger.js
@@ -53,9 +53,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
         if (color === "") {
-            this.colorContainer.element.css("background-color", "").addClass("none-color")
+            this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background")
         } else {
-            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+            this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
         }
     }
 });
diff --git a/src/css/base/colorchooser/colorchooser.trigger.css b/src/css/base/colorchooser/colorchooser.trigger.css
index 9b56fc3ce4..7e07cb5155 100644
--- a/src/css/base/colorchooser/colorchooser.trigger.css
+++ b/src/css/base/colorchooser/colorchooser.trigger.css
@@ -6,6 +6,3 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
-.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
-}
diff --git a/src/css/resource/background.css b/src/css/resource/background.css
index bfd6d7b485..02905d3d97 100644
--- a/src/css/resource/background.css
+++ b/src/css/resource/background.css
@@ -43,3 +43,13 @@
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/loading.gif');
   _background: none;
 }
+.auto-color-background {
+  background: url('background/auto-color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/auto-color.png');
+  _background: none;
+}
+.trans-color-background {
+  background: url('background/trans-color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/trans-color.png');
+  _background: none;
+}
diff --git a/src/less/base/colorchooser/colorchooser.trigger.less b/src/less/base/colorchooser/colorchooser.trigger.less
index 45a74746ef..e948a5f875 100644
--- a/src/less/base/colorchooser/colorchooser.trigger.less
+++ b/src/less/base/colorchooser/colorchooser.trigger.less
@@ -1,11 +1,6 @@
 @import "../../bibase";
 
 .bi-color-chooser-trigger {
-  & .color-chooser-trigger-content {
-    &.none-color {
-      background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>')
-    }
-  }
   .border-radius(2px);
   .box-shadow(0px, 0px, 2px, 1px, @color-bi-background-dark, inset);
 }
\ No newline at end of file
diff --git a/src/less/lib/background.less b/src/less/lib/background.less
index dc3aee3b88..9d3e92afa6 100644
--- a/src/less/lib/background.less
+++ b/src/less/lib/background.less
@@ -1 +1,3 @@
-@background-loading: "icon/loading.gif";
\ No newline at end of file
+@background-loading: "icon/loading.gif";
+@background-auto-color: "background/auto-color.png";
+@background-trans-color: "background/trans-color.png";
\ No newline at end of file
diff --git a/src/less/resource/background.less b/src/less/resource/background.less
index eb14dc752e..9196c4ce8c 100644
--- a/src/less/resource/background.less
+++ b/src/less/resource/background.less
@@ -6,7 +6,7 @@
   .imagePath(@icon-tree-vertical-line-1, 0, 0, repeat-y);
 }
 
-.bi-theme-dark{
+.bi-theme-dark {
   .base-line-conn-background {
     .imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 0, repeat-y);
   }
@@ -16,7 +16,7 @@
   .imagePath(@icon-tree-vertical-line-2);
 }
 
-.bi-theme-dark{
+.bi-theme-dark {
   .first-line-conn-background {
     .imagePath(@icon-tree-vertical-line-2-theme-dark);
   }
@@ -26,7 +26,7 @@
   .imagePath(@icon-tree-vertical-line-3);
 }
 
-.bi-theme-dark{
+.bi-theme-dark {
   .mid-line-conn-background {
     .imagePath(@icon-tree-vertical-line-3-theme-dark);
   }
@@ -36,7 +36,7 @@
   .imagePath(@icon-tree-vertical-line-4);
 }
 
-.bi-theme-dark{
+.bi-theme-dark {
   .last-line-conn-background {
     .imagePath(@icon-tree-vertical-line-4-theme-dark);
   }
@@ -45,3 +45,11 @@
 .loading-background {
   .imagePath(@icon-loading);
 }
+
+.auto-color-background {
+  .imagePath(@background-auto-color);
+}
+
+.trans-color-background {
+  .imagePath(@background-trans-color);
+}
\ No newline at end of file