/* === bg-image.css === */ /* ✅ 換這裡：設定你的背景圖路徑 */ :root{ --bg-url: url('bg.jpg'); } html,body{ height:100%; } body{ margin:0; color:#fff; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans TC","Microsoft JhengHei",sans-serif; } /* ———————————————————————————————— 方案 A：背景跟著內容一起滾動（預設）使用時： … ———————————————————————————————— */ body.bg-scroll{ background-image: var(--bg-url); background-size: cover; /* 依螢幕自動鋪滿 */ background-position: center center;/* 置中裁切 */ background-repeat: no-repeat; } /* ———————————————————————————————— 方案 B：視差感（背景固定於視窗）行動版相容使用時： … ———————————————————————————————— */ body.bg-fixed{ background: none; } body.bg-fixed::before{ content: ""; position: fixed; /* 固定在視窗 */ inset: 0; /* top/right/bottom/left = 0 */ z-index: -1; /* 放到內容後面 */ background-image: var(--bg-url); background-size: cover; background-position: center center; background-repeat: no-repeat; transform: translateZ(0); /* 提升在 iOS 上的穩定性 */ } /* 可選：半透明覆蓋，讓文字更清楚（兩方案通用） */ .overlay{ position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.35); } /* ✨ 如果你只想要最精簡版本： 1) 滾動背景： body{ margin:0; background: url('your-image.jpg') center/cover no-repeat; } 2) 固定背景： body{ margin:0; background:none; } body::before{ content:""; position:fixed; inset:0; z-index:-1; background: url('your-image.jpg') center/cover no-repeat; } */