# CSS背景圖片 使用方式
* ### **確保後續維護及開發規範統統一，新的實作方式請依照第一點方法為主!!不要將圖片寫在CSS背景中了!!!**
* **"確認數據已從後台接入的圖檔，請將該圖檔從專案移除"**
* **"若有新圖片需維持相同路徑打包給相關上傳人員"**

### 情況 1. 若寫在js或html
路徑須由getImage涵式回傳，路徑內若有版本字串(ex: aaa, aae) 用變數替代

### 情況 2. 若寫在css背景裡
需用css custom property(自定屬性)，將變數放置於`utils/cssImg/...` 內，並於`layout`引入

## 引入方式
於layout引入:

import { useDynamicImg } from "@/utils/cssImg"
const siteSettingsInfo = computed(() => store.state.siteSettingsInfo);
const { customStyle } = useDynamicImg('aaa', siteSettingsInfo)

將customStyle動態綁定到dom上，該節點底下的節點(元件)才會吃到變數
**siteSettingsInfo需整包丟入，避免失去響應性**
### 變數
- 名稱snakecase格式(ex: --aae-phone-home-popular-game-bg)
- 各版共用變數放`utils/cssImg/others`內，非共用放`utils/cssImg/[版本]`