Eclipse中JSP文件通过CSS添加带渐变的背景图不生效如何解决？

问题根源 #

你遇到的问题是Java Web项目静态资源路径解析规则和本地静态文件不同导致的：VS Code直接打开本地HTML使用file协议，相对路径按CSS文件所在位置计算；而Eclipse部署到Tomcat后走HTTP协议，路径按Web应用的上下文根路径计算，才会出现本地正常、部署后失效的情况。 #

可落地解决方法 #

• 方案1：将背景相关样式内嵌到JSP页面，使用EL表达式获取上下文路径补全资源地址，既可以保留渐变效果，也能解决路径匹配问题，示例代码如下：

<!-- 在JSP页面的head标签内添加 -->
<style>
.itemadd {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(${pageContext.request.contextPath}/image/home.jpg);
    background-size: cover;
}
.blur {
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(8px);
}
</style>

• 方案2：如果要保留外部CSS文件，先在JSP的head标签最前面配置全局base路径，后续所有相对路径都会基于该路径解析：

<!-- JSP页面head标签最前面添加 -->
<base href="${pageContext.request.contextPath}/">

CSS代码不需要额外修改，保持url(image/home.jpg)即可正常识别。

• 额外排查：如果修改后依然不生效，右键Eclipse内的项目选择「Maven -> Update Project」同步资源，再清理Tomcat工作目录后重新发布，避免静态资源没有同步到部署目录导致的404问题。

内容的提问来源于stack exchange，提问作者Manitosh Paul