feat(md-bg): Add solid color background support

docs/markdown.md

@@ -168,17 +168,20 @@
 ```markdown
 :md-bg[./images/background.jpg]
 :md-bg[./images/pattern.png]{fit="contain"}
+:md-bg[#ff00dd]
+:md-bg[rgb(100,200,50)]
 ```
 
 **功能：**
 - 将图片设置为当前文章卡片的背景
+- 支持纯色背景（CSS 颜色值）
 - 自动覆盖整个卡片区域
 
 **属性：**
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
-| `fit` | `cover` \| `contain` \| `fill` \| `none` \| `scale-down` | `cover` | 背景适配方式 |
+| `fit` | `cover` \| `contain` \| `fill` \| `none` \| `scale-down` | `cover` | 背景适配方式（仅图片时生效） |
 
 **示例：**
 
@@ -188,6 +191,14 @@
 # 地牢探险
 
 这里是地牢的描述内容...
+
+:md-bg[#2a1a3a]
+
+# 暗紫色背景
+
+:md-bg[rgb(200,50,50)]
+
+# 红色背景
 ```
 
 ### 📍 标记组件 (md-pins)

src/components/md-bg.tsx

@@ -7,10 +7,17 @@ export interface BgProps {
   fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
 }
 
+function isImagePath(value: string): boolean {
+  return (
+    /^(\.{0,2}\/|[a-zA-Z]:\\|https?:\/\/)/i.test(value) ||
+    /\.(png|jpg|jpeg|gif|svg|webp|bmp)(\?|$)/i.test(value)
+  );
+}
+
 customElement("md-bg", { fit: "cover" }, (props, { element }) => {
   noShadowDOM();
 
-  const rawSrc = element?.textContent?.trim() || "";
+  const rawValue = element?.textContent?.trim() || "";
 
   if (element) {
     element.textContent = "";
@@ -20,17 +27,24 @@ customElement("md-bg", { fit: "cover" }, (props, { element }) => {
   const articlePath =
     element?.closest("article[data-src]")?.getAttribute("data-src") || "";
 
-  const resolvedSrc = resolvePath(articlePath, rawSrc);
+  const isImage = isImagePath(rawValue);
+
+  const styles: Partial<CSSStyleDeclaration> = {} as any;
+
+  if (isImage) {
+    const resolvedSrc = resolvePath(articlePath, rawValue);
+    styles.backgroundImage = `url(${resolvedSrc})`;
+    styles.backgroundSize = props.fit || "cover";
+    styles.backgroundPosition = "center";
+    styles.backgroundRepeat = "no-repeat";
+  } else {
+    styles.backgroundColor = rawValue || undefined;
+  }
 
   const handle = registerStyle({
     key: "backgroundImage",
     article: articleEl,
-    styles: {
-      backgroundImage: `url(${resolvedSrc})`,
-      backgroundSize: props.fit || "cover",
-      backgroundPosition: "center",
-      backgroundRepeat: "no-repeat",
-    } as any,
+    styles,
   });
 
   onCleanup(() => handle.dispose());