mp-darkmode 1.0.5 → 1.0.9

package/dist/darkmode.js

@@ -2327,6 +2327,7 @@ __webpack_require__.r(__webpack_exports__);
  *
  * @function init 初始化Dark Mode配置
  * @param {Function}   opt.begin                 开始处理时触发的回调
+ * @param {Function}   opt.showFirstPage         首屏处理完成时触发的回调
  * @param {Function}   opt.error                 发生error时触发的回调
  * @param {String}     opt.mode                  强制指定的颜色模式(dark|light), 指定了就不监听系统颜色
  * @param {Object}     opt.whitelist             节点白名单
@@ -2353,6 +2354,8 @@ var config = {
   // hooks
   begin: null,
   // 开始处理时触发的回调
+  showFirstPage: null,
+  // 首屏处理完成时触发的回调
   error: null,
   // 发生error时触发的回调
   mode: '',
@@ -2471,6 +2474,8 @@ var switchToDarkmode = function switchToDarkmode(mqlObj) {
 
               domUtils.showFirstPageNodes(); // 显示首屏节点
 
+              typeof config.showFirstPage === 'function' && config.showFirstPage(); // 执行首屏回调
+
               cssUtils.addCss(sdk.convert(node), false); // 写入非首屏样式
             }
           }
@@ -2484,6 +2489,12 @@ var switchToDarkmode = function switchToDarkmode(mqlObj) {
         });
       }
 
+      if (config.needJudgeFirstPage || !config.needJudgeFirstPage && !domUtils.showFirstPage) {
+        // config.needJudgeFirstPage === ture，表示需要判断首屏但是正文长度没超过一屏
+        // config.needJudgeFirstPage === false && domUtils.showFirstPage === false，表示不需要判断首屏且没有做首屏优化
+        typeof config.showFirstPage === 'function' && config.showFirstPage();
+      }
+
       cssUtils.writeStyle(); // 写入非首屏样式表
     } else {
       // 首次加载页面时为非Dark Mode，标记为不需要判断首屏
@@ -2496,7 +2507,7 @@ var switchToDarkmode = function switchToDarkmode(mqlObj) {
       }
     }
   } catch (e) {
-    console.error(e);
+    console.log('An error occurred when running the dark mode conversion algorithm\n', e);
     typeof config.error === 'function' && config.error(e);
   }
 };
@@ -2529,6 +2540,7 @@ function init() {
   }
 
   setConfig('function', opt, 'begin');
+  setConfig('function', opt, 'showFirstPage');
   setConfig('function', opt, 'error');
   setConfig('boolean', opt, 'needJudgeFirstPage');
   setConfig('boolean', opt, 'delayBgJudge');
@@ -2685,7 +2697,7 @@ var BgNodeStack = /*#__PURE__*/function () {
 /*!*********************************!*\
   !*** ./src/modules/constant.js ***!
   \*********************************/
-/*! exports provided: MEDIA_QUERY, CLASS_PREFIX, HTML_CLASS, COLORATTR, BGCOLORATTR, ORIGINAL_COLORATTR, ORIGINAL_BGCOLORATTR, BGIMAGEATTR, DEFAULT_LIGHT_TEXTCOLOR, DEFAULT_LIGHT_BGCOLOR, DEFAULT_DARK_TEXTCOLOR, DEFAULT_DARK_BGCOLOR, GRAY_MASK_COLOR, WHITE_LIKE_COLOR_BRIGHTNESS, MAX_LIMIT_BGCOLOR_BRIGHTNESS, MIN_LIMIT_OFFSET_BRIGHTNESS, HIGH_BGCOLOR_BRIGHTNESS, HIGH_BLACKWHITE_HSL_BRIGHTNESS, LOW_BLACKWHITE_HSL_BRIGHTNESS, PAGE_HEIGHT, TABLE_NAME, IS_PC, IMPORTANT_REGEXP */
+/*! exports provided: MEDIA_QUERY, CLASS_PREFIX, HTML_CLASS, COLORATTR, BGCOLORATTR, ORIGINAL_COLORATTR, ORIGINAL_BGCOLORATTR, BGIMAGEATTR, DEFAULT_LIGHT_TEXTCOLOR, DEFAULT_LIGHT_BGCOLOR, DEFAULT_DARK_TEXTCOLOR, DEFAULT_DARK_BGCOLOR, GRAY_MASK_COLOR, WHITE_LIKE_COLOR_BRIGHTNESS, MAX_LIMIT_BGCOLOR_BRIGHTNESS, MIN_LIMIT_OFFSET_BRIGHTNESS, HIGH_BGCOLOR_BRIGHTNESS, HIGH_BLACKWHITE_HSL_BRIGHTNESS, LOW_BLACKWHITE_HSL_BRIGHTNESS, PAGE_HEIGHT, TABLE_NAME, IMPORTANT_REGEXP */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2711,7 +2723,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LOW_BLACKWHITE_HSL_BRIGHTNESS", function() { return LOW_BLACKWHITE_HSL_BRIGHTNESS; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PAGE_HEIGHT", function() { return PAGE_HEIGHT; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TABLE_NAME", function() { return TABLE_NAME; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "IS_PC", function() { return IS_PC; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "IMPORTANT_REGEXP", function() { return IMPORTANT_REGEXP; });
 /**
  * @name 常量
@@ -2750,8 +2761,6 @@ var LOW_BLACKWHITE_HSL_BRIGHTNESS = 22;
 var PAGE_HEIGHT = window.getInnerHeight && window.getInnerHeight() || window.innerHeight || document.documentElement.clientHeight;
 var TABLE_NAME = ['TABLE', 'TR', 'TD', 'TH']; // 支持bgcolor属性的table标签列表
 
-var UA = navigator.userAgent;
-var IS_PC = /windows\snt/i.test(UA) && !/Windows\sPhone/i.test(UA) || /mac\sos/i.test(UA) && !/(iPhone|iPad|iPod|iOS)/i.test(UA);
 var IMPORTANT_REGEXP = / !important$/; // !important
 
 /***/ }),
@@ -2958,6 +2967,8 @@ function hasTableClass(dom) {
  * @constructor
  * @param {Object} config Darkmode配置
  *
+ * @attr {boolean} showFirstPage 是否已显示首屏
+ *
  * @method set 设置要处理的节点列表
  * @param {Dom Object Array} nodes 要处理的节点列表
  *
@@ -2983,6 +2994,7 @@ var DomUtils = /*#__PURE__*/function () {
   // 要处理的节点列表
   // 首屏节点列表
   // 延迟处理的节点列表
+  // 是否已显示首屏
   function DomUtils(config) {
     _classCallCheck(this, DomUtils);
 
@@ -2992,6 +3004,8 @@ var DomUtils = /*#__PURE__*/function () {
 
     _defineProperty(this, "_delayNodes", []);
 
+    _defineProperty(this, "showFirstPage", false);
+
     this._config = config;
   }
 
@@ -3059,6 +3073,8 @@ var DomUtils = /*#__PURE__*/function () {
 
 
       this._firstPageNodes = []; // 处理完之后清空列表
+
+      this.showFirstPage = true; // 记录为已显示首屏
     }
   }]);
 
@@ -3134,27 +3150,32 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 color_name__WEBPACK_IMPORTED_MODULE_1___default.a.windowtext = [0, 0, 0]; // 补上这个colorName
 
+color_name__WEBPACK_IMPORTED_MODULE_1___default.a.transparent = [255, 255, 255, 0]; // 支持透明，暂定用白色透明度0来表示
+
  // 节点相关操作工具API
 
 
 var colorNameReg = new RegExp(Object.keys(color_name__WEBPACK_IMPORTED_MODULE_1___default.a).map(function (colorName) {
-  return "(^|[\\s,()]+)".concat(colorName, "([\\s,()]+|$)");
+  return "\\b".concat(colorName, "\\b");
 }).join('|'), 'ig'); // 生成正则表达式来匹配这些colorName
 
-var colorReg = /rgba?\([^)]+\)/i;
-var colorRegGlobal = /rgba?\([^)]+\)/ig;
+var colorReg = /\brgba?\([^)]+\)/i;
+var colorRegGlobal = /\brgba?\([^)]+\)/ig;
 
 var removeImportant = function removeImportant(value) {
   return value.replace(_constant__WEBPACK_IMPORTED_MODULE_2__["IMPORTANT_REGEXP"], '');
 }; // 清除!important
 
 
-var parseColor = function parseColor(value) {
+var parseColor = function parseColor(value, parseTransparent) {
   return removeImportant(value).replace(colorNameReg, function (match) {
-    return "rgb(".concat(color_name__WEBPACK_IMPORTED_MODULE_1___default.a[match.replace(/(^[\s,()]+)|([\s,()]+$)/g, '').toLowerCase()].toString(), ")");
-  });
-}; // 处理颜色，包括清除!important和转换英文定义颜色
+    // 处理颜色，包括清除!important和转换英文定义颜色
+    if (!parseTransparent && match === 'transparent') return match; // 如果不转换transparent，直接返回transparent
 
+    var color = color_name__WEBPACK_IMPORTED_MODULE_1___default.a[match.toLowerCase()];
+    return "".concat(color.length > 3 ? 'rgba' : 'rgb', "(").concat(color.toString(), ")");
+  });
+};
 
 var BG_COLOR_DELIMITER = '|'; // 计算mix颜色
 
@@ -3361,6 +3382,16 @@ var SDK = /*#__PURE__*/function () {
         extStyle: extStyle
       };
     }
+  }, {
+    key: "_try",
+    value: function _try(func) {
+      try {
+        return func();
+      } catch (e) {
+        console.log('An error occurred when running the dark mode conversion algorithm\n', e);
+        typeof this._config.error === 'function' && this._config.error(e);
+      }
+    }
   }, {
     key: "convert",
     value: function convert(el) {
@@ -3432,27 +3463,30 @@ var SDK = /*#__PURE__*/function () {
 
       if (_constant__WEBPACK_IMPORTED_MODULE_2__["TABLE_NAME"].indexOf(nodeName) > -1 && !hasInlineBackground) {
         // 如果table没有内联样式
-        var color = Object(_domUtils__WEBPACK_IMPORTED_MODULE_3__["hasTableClass"])(el); // 获取class对应的lm色值
+        this._try(function () {
+          var color = Object(_domUtils__WEBPACK_IMPORTED_MODULE_3__["hasTableClass"])(el); // 获取class对应的lm色值
 
-        if (!color) color = el.getAttribute('bgcolor'); // 如果没有class则获取bgcolor的色值
+          if (!color) color = el.getAttribute('bgcolor'); // 如果没有class则获取bgcolor的色值
 
-        if (color) {
-          // 有色值（class对应的lm色值或者是bgcolor色值），则当做内联样式来处理
-          cssKVList.unshift(['background-color', color__WEBPACK_IMPORTED_MODULE_0___default()(color).toString()]);
-          hasInlineBackground = true;
-        }
+          if (color) {
+            // 有色值（class对应的lm色值或者是bgcolor色值），则当做内联样式来处理
+            cssKVList.unshift(['background-color', color__WEBPACK_IMPORTED_MODULE_0___default()(color).toString()]);
+            hasInlineBackground = true;
+          }
+        });
       }
 
       if (nodeName === 'FONT' && !hasInlineColor) {
         // 如果是font标签且没有内联样式
-        var _color = el.getAttribute('color'); // 获取color的色值
+        this._try(function () {
+          var color = el.getAttribute('color'); // 获取color的色值
 
-
-        if (_color) {
-          // 有色值，则当做内联样式来处理
-          cssKVList.push(['color', color__WEBPACK_IMPORTED_MODULE_0___default()(_color).toString()]);
-          hasInlineColor = true;
-        }
+          if (color) {
+            // 有色值，则当做内联样式来处理
+            cssKVList.push(['color', color__WEBPACK_IMPORTED_MODULE_0___default()(color).toString()]);
+            hasInlineColor = true;
+          }
+        });
       } // 处理-webkit-text相关样式
 
 
@@ -3464,31 +3498,35 @@ var SDK = /*#__PURE__*/function () {
             key = _ref9[0],
             value = _ref9[1];
 
-        if (key.indexOf('-webkit-text') !== 0) {
-          // 遍历到非-webkit-text样式
-          webkitTextLen = idx; // 记录-webkit-text相关样式的长度
+        return _this._try(function () {
+          if (key.indexOf('-webkit-text') !== 0) {
+            // 遍历到非-webkit-text样式
+            webkitTextLen = idx; // 记录-webkit-text相关样式的长度
 
-          return true; // 结束遍历
-        }
+            return true; // 结束遍历
+          }
 
-        switch (key) {
-          case '-webkit-text-fill-color':
-            webkitFillColor = parseWebkitFillColorAndStrokeColor(value);
-            break;
-
-          case '-webkit-text-stroke':
-            // 有-webkit-text-stroke时就不会有-webkit-text-stroke-color
-            var newValue = value.split(' ');
-            newValue.length === 2 && (webkitStrokeColor = parseWebkitFillColorAndStrokeColor(newValue[1]));
-            break;
-
-          case '-webkit-text-stroke-color':
-            // 有-webkit-text-stroke-color时就不会有-webkit-text-stroke
-            webkitStrokeColor = parseWebkitFillColorAndStrokeColor(value);
-            break;
-        }
+          switch (key) {
+            case '-webkit-text-fill-color':
+              webkitFillColor = parseWebkitFillColorAndStrokeColor(value);
+              break;
+
+            case '-webkit-text-stroke':
+              {
+                // 有-webkit-text-stroke时就不会有-webkit-text-stroke-color
+                var newValue = value.split(' ');
+                newValue.length === 2 && (webkitStrokeColor = parseWebkitFillColorAndStrokeColor(newValue[1]));
+                break;
+              }
 
-        return false; // 继续遍历
+            case '-webkit-text-stroke-color':
+              // 有-webkit-text-stroke-color时就不会有-webkit-text-stroke
+              webkitStrokeColor = parseWebkitFillColorAndStrokeColor(value);
+              break;
+          }
+
+          return false; // 继续遍历
+        });
       });
 
       if (webkitFillColor) {
@@ -3514,154 +3552,160 @@ var SDK = /*#__PURE__*/function () {
             key = _ref11[0],
             value = _ref11[1];
 
-        var oldValue = value;
-        var cssChange = false; // 将英文定义颜色转换为rgb格式
-
-        value = parseColor(value); // 找出色值来处理
+        return _this._try(function () {
+          var oldValue = value;
+          var cssChange = false; // 找出色值来处理
 
-        var isBgColor = /^background/.test(key);
-        var isTextShadow = key === 'text-shadow';
-        var textColorIdx = ['-webkit-text-stroke-color', 'color', '-webkit-text-fill-color'].indexOf(key);
-        var isBorderColor = /^border/.test(key);
-        var isGradient = /gradient/.test(value);
-        var gradientColors = [];
-        var extStyle = '';
-        var gradientMixColor;
+          var isBgColor = /^background/.test(key);
+          var isTextShadow = key === 'text-shadow';
+          var textColorIdx = ['-webkit-text-stroke-color', 'color', '-webkit-text-fill-color'].indexOf(key);
+          var isBorderColor = /^border/.test(key);
+          var isGradient = /gradient/.test(value);
+          var gradientColors = [];
+          var extStyle = '';
+          var gradientMixColor; // 将英文定义颜色转换为rgb格式
 
-        if (colorReg.test(value)) {
-          if (isGradient) {
-            // 把原渐变色取出来
-            value.replace(colorRegGlobal, function (match) {
-              return gradientColors.push(match);
-            }); // 计算出一个mix颜色
+          value = parseColor(value, isGradient); // 渐变需要处理透明
 
-            gradientMixColor = mixColor([].concat(gradientColors)); // console.log(value, gradientColors, 'mix:', gradientMixColor) ;
-          }
-
-          var replaceIndex = 0;
-          value = value.replace(colorRegGlobal, function (match) {
-            // 渐变色统一改成mix纯色
+          if (colorReg.test(value)) {
             if (isGradient) {
-              match = gradientMixColor;
-              cssChange = true;
-            } // 使用颜色处理算法
-
+              // 把原渐变色取出来
+              var matches = colorRegGlobal.exec(value);
 
-            var ret = _this._adjustBrightness(color__WEBPACK_IMPORTED_MODULE_0___default()(match), el, {
-              isBgColor: isBgColor,
-              isTextShadow: isTextShadow,
-              isTextColor: textColorIdx > -1,
-              isBorderColor: isBorderColor,
-              hasInlineColor: hasInlineColor
-            });
+              while (matches) {
+                gradientColors.push(matches[0]);
+                matches = colorRegGlobal.exec(value);
+              } // 计算出一个mix颜色
 
-            var retColor = !hasInlineBackgroundImage && ret.newColor;
-            extStyle += ret.extStyle; // 对背景颜色和文字颜色做继承传递，用于文字亮度计算
 
-            if (isBgColor || textColorIdx > 0) {
-              // 不处理-webkit-text-stroke-color
-              var attrName = isBgColor ? _constant__WEBPACK_IMPORTED_MODULE_2__["BGCOLORATTR"] : _constant__WEBPACK_IMPORTED_MODULE_2__["COLORATTR"];
-              var originalAttrName = isBgColor ? _constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_BGCOLORATTR"] : _constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_COLORATTR"];
-              var retColorStr = retColor ? retColor.toString() : match;
-              replaceIndex === 0 && Object(_domUtils__WEBPACK_IMPORTED_MODULE_3__["getChildrenAndIt"])(el).forEach(function (dom) {
-                var originalAttrValue = dom.getAttribute(originalAttrName) || _this._config.defaultLightBgColor;
-
-                dom.setAttribute(attrName, retColorStr);
-                dom.setAttribute(originalAttrName, originalAttrValue.split(BG_COLOR_DELIMITER).concat(match).join(BG_COLOR_DELIMITER)); // 如果设置背景颜色，取消背景图片的影响
+              gradientMixColor = mixColor(gradientColors);
+            }
 
-                if (isBgColor && color__WEBPACK_IMPORTED_MODULE_0___default()(retColorStr).alpha() >= 0.05 && dom.getAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"])) {
-                  dom.removeAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"]);
-                }
+            var replaceIndex = 0;
+            value = value.replace(colorRegGlobal, function (match) {
+              // 渐变色统一改成mix纯色
+              if (isGradient) {
+                match = gradientMixColor;
+                cssChange = true;
+              } // 使用颜色处理算法
+
+
+              var ret = _this._adjustBrightness(color__WEBPACK_IMPORTED_MODULE_0___default()(match), el, {
+                isBgColor: isBgColor,
+                isTextShadow: isTextShadow,
+                isTextColor: textColorIdx > -1,
+                isBorderColor: isBorderColor,
+                hasInlineColor: hasInlineColor
               });
-            }
 
-            retColor && (cssChange = true);
-            replaceIndex += 1;
-            return retColor || match;
-          }).replace(/\s?!\s?important/ig, '');
-        }
+              var retColor = !hasInlineBackgroundImage && ret.newColor;
+              extStyle += ret.extStyle; // 对背景颜色和文字颜色做继承传递，用于文字亮度计算
 
-        if (extStyle) {
-          cssKV += extStyle;
-        }
+              if (isBgColor || textColorIdx > 0) {
+                // 不处理-webkit-text-stroke-color
+                var attrName = isBgColor ? _constant__WEBPACK_IMPORTED_MODULE_2__["BGCOLORATTR"] : _constant__WEBPACK_IMPORTED_MODULE_2__["COLORATTR"];
+                var originalAttrName = isBgColor ? _constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_BGCOLORATTR"] : _constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_COLORATTR"];
+                var retColorStr = retColor ? retColor.toString() : match;
+                replaceIndex === 0 && Object(_domUtils__WEBPACK_IMPORTED_MODULE_3__["getChildrenAndIt"])(el).forEach(function (dom) {
+                  var originalAttrValue = dom.getAttribute(originalAttrName) || _this._config.defaultLightBgColor;
 
-        if (!(el instanceof SVGElement)) {
-          // 先不处理SVG
-          // 背景图片、边框图片
-          var isBackgroundAttr = /^background/.test(key);
-          var isBorderImageAttr = /^(-webkit-)?border-image/.test(key);
-
-          if ((isBackgroundAttr || isBorderImageAttr) && /url\([^)]*\)/i.test(value)) {
-            cssChange = true;
-            var imgBgColor = mixColor((el.getAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_BGCOLORATTR"]) || _this._config.defaultLightBgColor).split(BG_COLOR_DELIMITER)); // 在背景图片下加一层原背景颜色：
-            // background-image使用多层背景(注意background-position也要多加一层 https://www.w3.org/TR/css-backgrounds-3/#layering)；
-            // border-image不支持多层背景，需要添加background-color
-
-            value = value.replace(/^(.*?)url\(([^)]*)\)(.*)$/i, function (matches) {
-              var newValue = matches;
-              var newBackgroundPositionValue = '';
-              var newBackgroundSizeValue = '';
-              var tmpCssKvStr = '';
-
-              if (el.getAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"]) !== '1') {
-                // 避免重复setAttribute
-                Object(_domUtils__WEBPACK_IMPORTED_MODULE_3__["getChildrenAndIt"])(el).forEach(function (dom) {
-                  return dom.setAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"], '1');
+                  dom.setAttribute(attrName, retColorStr);
+                  dom.setAttribute(originalAttrName, originalAttrValue.split(BG_COLOR_DELIMITER).concat(match).join(BG_COLOR_DELIMITER)); // 如果设置背景颜色，取消背景图片的影响
+
+                  if (isBgColor && color__WEBPACK_IMPORTED_MODULE_0___default()(retColorStr).alpha() >= 0.05 && dom.getAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"])) {
+                    dom.removeAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"]);
+                  }
                 });
-              } // background-image
+              }
 
+              retColor && (cssChange = true);
+              replaceIndex += 1;
+              return retColor || match;
+            }).replace(/\s?!\s?important/ig, '');
+          }
 
-              if (isBackgroundAttr) {
-                newValue = "linear-gradient(".concat(_constant__WEBPACK_IMPORTED_MODULE_2__["GRAY_MASK_COLOR"], ", ").concat(_constant__WEBPACK_IMPORTED_MODULE_2__["GRAY_MASK_COLOR"], "),").concat(matches);
-                tmpCssKvStr = _this._cssUtils.genCssKV(key, "".concat(newValue, ",linear-gradient(").concat(imgBgColor, ", ").concat(imgBgColor, ")"));
+          if (extStyle) {
+            cssKV += extStyle;
+          }
 
-                if (elBackgroundPositionAttr) {
-                  newBackgroundPositionValue = "top left,".concat(elBackgroundPositionAttr);
-                  cssKV += _this._cssUtils.genCssKV('background-position', "".concat(newBackgroundPositionValue));
-                  tmpCssKvStr += _this._cssUtils.genCssKV('background-position', "".concat(newBackgroundPositionValue, ",top left"));
-                }
+          if (!(el instanceof SVGElement)) {
+            // 先不处理SVG
+            // 背景图片、边框图片
+            var isBackgroundAttr = /^background/.test(key);
+            var isBorderImageAttr = /^(-webkit-)?border-image/.test(key);
 
-                if (elBackgroundSizeAttr) {
-                  newBackgroundSizeValue = "100%,".concat(elBackgroundSizeAttr);
-                  cssKV += _this._cssUtils.genCssKV('background-size', "".concat(newBackgroundSizeValue));
-                  tmpCssKvStr += _this._cssUtils.genCssKV('background-size', "".concat(newBackgroundSizeValue, ",100%"));
+            if ((isBackgroundAttr || isBorderImageAttr) && /url\([^)]*\)/i.test(value)) {
+              cssChange = true;
+              var imgBgColor = mixColor((el.getAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_BGCOLORATTR"]) || _this._config.defaultLightBgColor).split(BG_COLOR_DELIMITER)); // 在背景图片下加一层原背景颜色：
+              // background-image使用多层背景(注意background-position也要多加一层 https://www.w3.org/TR/css-backgrounds-3/#layering)；
+              // border-image不支持多层背景，需要添加background-color
+
+              value = value.replace(/^(.*?)url\(([^)]*)\)(.*)$/i, function (matches) {
+                var newValue = matches;
+                var newBackgroundPositionValue = '';
+                var newBackgroundSizeValue = '';
+                var tmpCssKvStr = '';
+
+                if (el.getAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"]) !== '1') {
+                  // 避免重复setAttribute
+                  Object(_domUtils__WEBPACK_IMPORTED_MODULE_3__["getChildrenAndIt"])(el).forEach(function (dom) {
+                    return dom.setAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"], '1');
+                  });
+                } // background-image
+
+
+                if (isBackgroundAttr) {
+                  newValue = "linear-gradient(".concat(_constant__WEBPACK_IMPORTED_MODULE_2__["GRAY_MASK_COLOR"], ", ").concat(_constant__WEBPACK_IMPORTED_MODULE_2__["GRAY_MASK_COLOR"], "),").concat(matches);
+                  tmpCssKvStr = _this._cssUtils.genCssKV(key, "".concat(newValue, ",linear-gradient(").concat(imgBgColor, ", ").concat(imgBgColor, ")"));
+
+                  if (elBackgroundPositionAttr) {
+                    newBackgroundPositionValue = "top left,".concat(elBackgroundPositionAttr);
+                    cssKV += _this._cssUtils.genCssKV('background-position', "".concat(newBackgroundPositionValue));
+                    tmpCssKvStr += _this._cssUtils.genCssKV('background-position', "".concat(newBackgroundPositionValue, ",top left"));
+                  }
+
+                  if (elBackgroundSizeAttr) {
+                    newBackgroundSizeValue = "100%,".concat(elBackgroundSizeAttr);
+                    cssKV += _this._cssUtils.genCssKV('background-size', "".concat(newBackgroundSizeValue));
+                    tmpCssKvStr += _this._cssUtils.genCssKV('background-size', "".concat(newBackgroundSizeValue, ",100%"));
+                  }
+
+                  _this._bgStack.push(el, tmpCssKvStr); // 背景图入栈
+
+                } else {
+                  // border-image元素，如果当前元素没有背景颜色，补背景颜色
+                  !hasInlineBackground && _this._bgStack.push(el, _this._cssUtils.genCssKV('background-image', "linear-gradient(".concat(_constant__WEBPACK_IMPORTED_MODULE_2__["GRAY_MASK_COLOR"], ", ").concat(_constant__WEBPACK_IMPORTED_MODULE_2__["GRAY_MASK_COLOR"], "),linear-gradient(").concat(imgBgColor, ", ").concat(imgBgColor, ")"))); // 背景图入栈
                 }
 
-                _this._bgStack.push(el, tmpCssKvStr); // 背景图入栈
+                return newValue;
+              }); // 没有设置自定义字体颜色，则使用非 Dark Mode 下默认字体颜色
 
-              } else {
-                // border-image元素，如果当前元素没有背景颜色，补背景颜色
-                !hasInlineBackground && _this._bgStack.push(el, _this._cssUtils.genCssKV('background-image', "linear-gradient(".concat(_constant__WEBPACK_IMPORTED_MODULE_2__["GRAY_MASK_COLOR"], ", ").concat(_constant__WEBPACK_IMPORTED_MODULE_2__["GRAY_MASK_COLOR"], "),linear-gradient(").concat(imgBgColor, ", ").concat(imgBgColor, ")"))); // 背景图入栈
+              if (!hasInlineColor) {
+                var textColor = mixColor((el.getAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_COLORATTR"]) || _this._config.defaultLightTextColor).split(BG_COLOR_DELIMITER));
+                cssKV += _this._cssUtils.genCssKV('color', textColor);
+                Object(_domUtils__WEBPACK_IMPORTED_MODULE_3__["getChildrenAndIt"])(el).forEach(function (dom) {
+                  return dom.setAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["COLORATTR"], textColor);
+                });
               }
-
-              return newValue;
-            }); // 没有设置自定义字体颜色，则使用非 Dark Mode 下默认字体颜色
-
-            if (!hasInlineColor) {
-              var textColor = mixColor((el.getAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_COLORATTR"]) || _this._config.defaultLightTextColor).split(BG_COLOR_DELIMITER));
-              cssKV += _this._cssUtils.genCssKV('color', textColor);
-              Object(_domUtils__WEBPACK_IMPORTED_MODULE_3__["getChildrenAndIt"])(el).forEach(function (dom) {
-                return dom.setAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["COLORATTR"], textColor);
-              });
             }
           }
-        }
 
-        if (cssChange) {
-          _constant__WEBPACK_IMPORTED_MODULE_2__["IMPORTANT_REGEXP"].test(oldValue) && (styles[key] = removeImportant(oldValue)); // 清除inline style的!important
+          if (cssChange) {
+            _constant__WEBPACK_IMPORTED_MODULE_2__["IMPORTANT_REGEXP"].test(oldValue) && (styles[key] = removeImportant(oldValue)); // 清除inline style的!important
 
-          if (isGradient) {
-            _this._bgStack.push(el, _this._cssUtils.genCssKV(key, value)); // 渐变入栈
+            if (isGradient) {
+              _this._bgStack.push(el, _this._cssUtils.genCssKV(key, value)); // 渐变入栈
 
-          } else {
-            cssKV += _this._cssUtils.genCssKV(key, value);
+            } else {
+              cssKV += _this._cssUtils.genCssKV(key, value);
+            }
           }
-        }
+        });
       });
 
       if (cssKV) {
         // 有处理过或者是背景图片就加class以及css
-        _constant__WEBPACK_IMPORTED_MODULE_2__["IS_PC"] && el.setAttribute('data-style', styles.cssText); // PC端备份内联样式到data-style里，供编辑器做反处理
+        el.setAttribute('data-style', styles.cssText); // 备份内联样式到data-style里，供编辑器做反处理
 
         var className = "".concat(_constant__WEBPACK_IMPORTED_MODULE_2__["CLASS_PREFIX"]).concat(this._idx++);
         el.classList.add(className);