feat: remove background color of image by default

Joe-Max-LK4Job · Sep 27, 2022 · 76950f4 · 76950f4
1 parent 61b0cce
commit 76950f4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/help/FEATURES.md b/help/FEATURES.md
@@ -90,10 +90,10 @@ This feature is implemented using [markdown-it-attributes](https://github.com/pu
 
 ### Image Enhancement
 
-1. The picture will be rendered as a block element and centered by default, with a transparent background color.
-    + If you want to display the image as an inline element, you can add `.inline` after the image link parameter, such as: ![](mas_en.svg?.inline)
-    + If you want to add a white background to the image to optimize the display effect (for some transparent images), you can add `.bgw` after the image link parameter, such as: ![](mas_en.svg?.inline.bgw)
+![](mas_en.svg?.inline)
 
+1. If the paragraph has one image element only, the picture will be rendered as a block element and centered by default. If you want to display the image as an inline element, you can add `.inline` after the image link parameter, example is above.
+1. If you want to add a white background to the image to optimize the display effect (for some transparent images), you can add `.bgw` after the image link parameter, such as: ![](mas_en.svg?.bgw)
 1. You can use [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) to set the image size. For example, this is an image with a width of 16px: ![](logo-small.png?.inline =16x)
 
 ## Mind Map

diff --git a/help/FEATURES_ZH-CN.md b/help/FEATURES_ZH-CN.md
@@ -91,12 +91,12 @@ define:
 
 ### 图片增强
 
-1. 图片默认会渲染成块元素并居中，背景色透明
-    + 如果要显示为行内元素，可以在图片链接参数后面追加 `.inline` 如：![](mas_en.svg?.inline)
-    + 如果要给图片添加白色背景优化展示效果（针对某些透明图片）,可以在图片链接参数后面追加 `.bgw` 如：![](mas_en.svg?.inline.bgw)
+![](mas_en.svg?.inline)
 
+1. 一个段落下如果只有一个图片元素，默认会渲染成块元素并居中。如果要强制显示为行内元素，可以在图片链接参数后面追加 `.inline` 如上图所示。
+1. 如果要给图片添加白色背景优化展示效果（针对某些透明图片）,可以在图片链接参数后面追加 `.bgw` 如：![](mas_en.svg?.bgw)
 1. 可以使用[markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize)的方式来设置图片尺寸
-    例如这是一个宽度为 16px 的图片: ![](logo-small.png?.inline =16x)
+    例如这是一个宽度为 16px 的图片: ![](logo-small.png =16x)
 
 ## 思维导图
 

diff --git a/src/renderer/components/Preview.vue b/src/renderer/components/Preview.vue
@@ -570,15 +570,13 @@ export default defineComponent({
       display: block;
       margin-left: auto;
       margin-right: auto;
-      background-color: #fff;
     }
 
     img {
       &.inline,
       &[src*=".inline"],
       &[origin-src*=".inline"] {
         display: inline !important;
-        background-color: unset !important;
       }
 
       &.bgw,