1. 打開自訂樣式設定
在 FUXA 專案裡：
- 先點上方齒輪進入 Setup
- 進入 Layout settings
- 找到 Custom styles 區塊
這裡可以直接輸入 CSS 來控制整個畫面的外觀。
2. 套用棋盤格背景
在 Custom styles 裡貼上下面的程式碼：
.mat-drawer-content {
background-color: #fff; /* 底色 */
background-image:
linear-gradient(45deg, #eee 25%, transparent 25%),
linear-gradient(-45deg, #eee 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #eee 75%),
linear-gradient(-45deg, transparent 75%, #eee 75%);
background-size: 20px 20px; /* 每格大小，可改大或小 */
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
3. 顏色調整
想要更淡 → 把 #eee 改成 #f2f2f2 或 #f5f5f5
想要更明顯 → 把 #eee 改成 #ccc 或更深的灰色
4. 效果展示
- 白色和淺灰色交錯，形成棋盤格。
- 格子不會真的存在於圖片，只是方便看透明背景。
- 這樣在 FUXA 裡畫面就能跟 Photoshop 一樣清楚辨識透明區域。
📌 小技巧：
background-size: 20px 20px; 可以改成 10px、30px，調整格子大小。- 也能換成兩種不同灰色（例如
#f0f0f0 和 #d9d9d9），更接近 Photoshop 的風格。