JSP 網頁開發中背景圖片與插入圖片的完整配置指南

圖片儲存位置規範

在 Java Web 專案 (Maven 結構) 中，靜態資源建議放置於：

src/main/webapp/
├── images/          # 存放圖片 (背景圖、Icon、Banner 等)
│   ├── bg.jpg
│   └── logo.png
├── css/
│   └── style.css
├── js/
└── WEB-INF/

部署後可透過 https://host:port/contextPath/images/bg.jpg 存取。

設定背景圖片的三種方式

方式一：內嵌樣式 (簡單頁面)

<body style="background-image: url('images/bg.jpg'); 
               background-size: cover;
               background-position: center;
               background-repeat: no-repeat;">
    <!-- 頁面內容 -->
</body>

方式二：外部 CSS (推薦，易維護)

body {
    background-image: url('../images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* 視差效果 */
}

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>...</body>

方式三：CSS 類別複用 (多頁面不同背景)

.bg-home { background-image: url('../images/home-bg.jpg'); }
.bg-login { background-image: url('../images/login-bg.jpg'); }
.bg-dashboard { background-image: url('../images/dashboard-bg.jpg'); }

/* 共用背景樣式 */
.bg-common {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

<body class="bg-home bg-common">...</body>

插入內容圖片

基本語法

<img src="images/logo.png" alt="公司Logo" width="200" height="80">

動態路徑 (使用 JSP 表達式/EL)

<!-- 使用 pageContext.request.contextPath 確保路徑正確 -->
<img src="<%=request.getContextPath()%>/images/photo.jpg" alt="相片">

<!-- 或使用 JSTL core (需引入 taglib) -->
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<img src="<c:url value='/images/photo.jpg'/>" alt="相片">

圖片Base64內嵌 (小圖標減少請求)

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="icon">

路徑問題完整解析

進階技巧

1. 圖片預載入 (提升體驗)

<script>
function preloadImages() {
    var imgs = ['images/bg.jpg', 'images/banner1.jpg', 'images/banner2.jpg'];
    imgs.forEach(function(src) {
        var img = new Image();
        img.src = src;
    });
}
window.onload = preloadImages;
</script>

2. 響應式圖片 (適配不同螢幕)

<picture>
    <source media="(max-width: 480px)" srcset="images/bg-mobile.jpg">
    <source media="(max-width: 768px)" srcset="images/bg-tablet.jpg">
    <img src="images/bg-desktop.jpg" alt="背景">
</picture>

3. 背景圖片漸變疊加 (文字可讀性)

.hero-section {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('../images/bg.jpg');
    background-size: cover;
    color: white;
}

常見問題排查

總結

• 圖片放在 webapp/images/，CSS 放在 webapp/css/
• 背景圖用 CSS background-image，內容圖用 <img>
• 路徑一律使用 ${pageContext.request.contextPath} 或 <c:url> 確保可攜性
• 善用 background-size: cover、background-position: center 處理各種螢幕尺寸