From 95be758bcce676c0155ea13e080082aa7c03f23c Mon Sep 17 00:00:00 2001
From: hyper <hx.hyper@qq.com>
Date: Fri, 27 Feb 2026 21:22:13 +0800
Subject: [PATCH] feat: md-bg

---
 src/components/index.ts              |  1 +
 src/components/md-bg.tsx             | 47 ++++++++++++++++++++++++++++
 src/components/md-deck/CardLayer.tsx |  2 +-
 src/components/utils/path.ts         |  4 +++
 4 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/components/md-bg.tsx

diff --git a/src/components/index.ts b/src/components/index.ts
index 324414f..1923658 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ import './md-dice';
 import './md-table';
 import './md-link';
 import './md-pins';
+import './md-bg';
 import './md-deck';
 
 // 导出组件
diff --git a/src/components/md-bg.tsx b/src/components/md-bg.tsx
new file mode 100644
index 0000000..2baaf35
--- /dev/null
+++ b/src/components/md-bg.tsx
@@ -0,0 +1,47 @@
+import { customElement, noShadowDOM } from "solid-element";
+import {createEffect, createResource } from "solid-js";
+import { resolvePath } from "./utils/path";
+
+customElement("md-bg", {}, (props, { element }) => {
+  noShadowDOM();
+
+  // 从 element 的 textContent 获取图片路径
+  const rawSrc = element?.textContent?.trim() || '';
+
+  // 隐藏原始文本内容
+  if (element) {
+    element.textContent = "";
+  }
+
+  // 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
+  const articleEl = element?.closest('article');
+  const articlePath = articleEl?.getAttribute('data-src') || '';
+
+  // 解析相对路径
+  const resolvedSrc = resolvePath(articlePath, rawSrc);
+
+  // 加载图片
+  const loadImage = (src: string): Promise<HTMLImageElement> => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+      img.src = src;
+    });
+  };
+
+  const [image] = createResource(resolvedSrc, loadImage);
+
+  createEffect(() => {
+    // 图片加载完成后，将背景图片设置到 article 元素
+      console.log(resolvedSrc, image(), articleEl);
+    if (image() && articleEl) {
+      articleEl.style.backgroundImage = `url(${resolvedSrc})`;
+      articleEl.style.backgroundSize = 'cover';
+      articleEl.style.backgroundPosition = 'center';
+      articleEl.style.backgroundRepeat = 'no-repeat';
+    }
+  });
+
+  return null;
+});
diff --git a/src/components/md-deck/CardLayer.tsx b/src/components/md-deck/CardLayer.tsx
index 23acba8..249d426 100644
--- a/src/components/md-deck/CardLayer.tsx
+++ b/src/components/md-deck/CardLayer.tsx
@@ -29,7 +29,7 @@ export function CardLayer(props: CardLayerProps) {
   return (
     <For each={props.layers}>
       {(layer) => (
-        <div
+        <article
           class="absolute flex items-center justify-center text-center prose prose-sm"
           style={{
             ...getLayerStyle(layer, props.dimensions),
diff --git a/src/components/utils/path.ts b/src/components/utils/path.ts
index 6d82cc8..e1c78d9 100644
--- a/src/components/utils/path.ts
+++ b/src/components/utils/path.ts
@@ -9,6 +9,10 @@ export function resolvePath(base: string, relative: string): string {
   if (relative.startsWith('/')) {
     return relative;
   }
+  // if starts with http(s)://
+  if(relative.startsWith('http://') || relative.startsWith('https://')){
+      return relative;
+  }
 
   const baseParts = base.split('/').filter(Boolean);
   // 移除文件名，保留目录路径