Question

我正在努力应对一些奇怪的情况。我正在尝试设置身体的背景图像，但我不想显示在页面上。

我认为我的项目结构正确：

我正在尝试将此图像附加到身体上，使其看起来像这样：

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!doctype html>
<html lang="en">

<head>

<title>Login Page</title>
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Reference Bootstrap files -->
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<style>
body {
  background-image: url("../images/backimg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>

</head>
<body>

    <div>

        <div id="loginbox" style="margin-top: 50px;"
            class="mainbox col-md-3 col-md-offset-2 col-sm-6 col-sm-offset-2">

            <div class="panel panel-info">

                <div class="panel-heading">
                    <div class="panel-title">Sign In</div>
                </div>

                <div style="padding-top: 30px" class="panel-body">

                    <!-- Login Form -->
                    <form:form
                        action="${pageContext.request.contextPath}/authenticateTheUser"
                        method="POST" class="form-horizontal">

                        <!-- Place for messages: error, alert etc ... -->
                        <div class="form-group">
                            <div class="col-xs-15">
                                <div>

                                    <!-- Check for login error -->

                                    <c:if test="${param.error != null}">

                                        <div class="alert alert-danger col-xs-offset-1 col-xs-10">
                                            Invalid username and password.</div>

                                    </c:if>

                                    <c:if test="${param.logout != null}">

                                    <div class="alert alert-success col-xs-offset-1 col-xs-10">
                                        You have been logged out.</div>

                                    </c:if>
                                </div>
                            </div>
                        </div>

                        <!-- User name -->
                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i
                                class="glyphicon glyphicon-user"></i></span> <input type="text"
                                name="username" placeholder="username" class="form-control">
                        </div>

                        <!-- Password -->
                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i
                                class="glyphicon glyphicon-lock"></i></span> <input type="password"
                                name="password" placeholder="password" class="form-control">
                        </div>

                        <!-- Login/Submit Button -->
                        <div style="margin-top: 10px" class="form-group">
                            <div class="col-sm-6 controls">
                                <button type="submit" class="btn btn-success">Login</button>
                            </div>
                        </div>

                    </form:form>

                </div>

            </div>

        </div>

    </div>

</body>
</html>

这些路径不起作用：

-background-image：url（“ ../ images / backimg.jpg”）;

-background-image：url（“ ../ resources / images / backimg.jpg”）;

有什么想法吗？预先感谢。

Answer 1

您可以尝试这种方式

background-image:url("src/main/webapp/resources/images/backimg.jpg")

Spring MVC，无法加载背景图片

1 个答案: