讓房間在平面圖上亮起來：image 元素與圖層順序（最容易踩的坑）

charles · 發表於 3 天前

到目前為止，燈開了只是圖示變色。

這篇要做到整個房間亮起來。

原理很簡單

準備一張「客廳亮燈」的圖片，燈開的時候顯示它，關的時候顯示透明圖。

就這樣。沒有魔法。

第一步：做出「亮燈圖層」

這是唯一需要動手的部分。你要做的是：

一張跟底圖一樣大的圖片，只有客廳的位置有顏色，其他地方全透明。

怎麼做（用小畫家 3D 或任何有「透明背景」功能的工具）：

開一張跟底圖一樣尺寸的畫布（例如 1000 × 620）
背景設成透明
在客廳的位置畫一個半透明的黃色方塊
另存成 PNG（一定要 PNG，JPG 不支援透明）
檔名例如 living_on.png

顏色建議：

暖黃色：#FFD54F 或 #FFC107
透明度 30-50%（太不透明會蓋住底圖的細節）

用 Inkscape 的話更簡單：

開啟你的平面圖 SVG
複製客廳那個方形
填充改成黃色、透明度 40%
把其他東西都刪掉
匯出 PNG

第二步：把圖層檔案放進去

/config/www/floorplan/
├── home.png ← 底圖
├── transparent.png ← 全透明（上一篇講過）
└── rooms/
├── living_on.png
├── dining_on.png
├── kitchen_on.png
├── bedroom_on.png
├── bathroom_on.png
└── second_bedroom_on.png

複製代碼

以下還有約 78% 的內容
登入後即可閱讀完整教學

登入繼續閱讀使用 Google 登入

		自動登入	找回密碼
密碼			立即註冊