CSS 背景圖片不隨文字縮放的固定寬高技巧

問題現象

解決方案：給容器固定尺寸並居中文字

li {
    width: 120px;       /* 固定寬度 */
    height: 40px;       /* 固定高度 */
    line-height: 40px;  /* 文字垂直居中 */
    text-align: center; /* 文字水平居中 */
    background: url('icon.png') no-repeat center center;
    background-size: contain; /* 或 cover，視設計而定 */
    overflow: hidden;   /* 防止文字溢出影響佈局 */
}

關鍵屬性說明

• width/height：鎖定容器尺寸，背景圖片不再隨內容縮放。
• line-height = height：單行文字垂直居中最簡單有效的方法。
• background-size：`contain` 完整顯示圖片，`cover` 填滿容器可能裁切。
• 若需多行文字，改用 `display: flex; align-items: center; justify-content: center;` 配合固定高度。

設定固定寬高並配合 `line-height` 或 Flexbox，即可讓背景圖片保持原貌，文字優雅居中。