背景图片未显示在JSP

时间:2018-03-27 01:35:23

标签: java css spring jsp background-image

我正在尝试使用spring来创建页面。我被困在后面的地面图像出现了。请帮忙。

我的项目结构:
试用
| _WebContent
| _resources
  | _theme
 | _Web-INF
 | _view
   | _dispatcher-servlet.xml
    | _web.xml

我的web.xml:

<servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

我的dispatcher-servlet.xml:

<mvc:annotation-driven />
<bean
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix">
        <value>/WEB-INF/view/</value>
    </property>
    <property name="suffix">
        <value>.jsp</value>
    </property>
</bean>
<mvc:resources mapping="/resources/**" location="/resources/theme/"  
cache-period="31556926"/>

我所有的jsp文件都在WEB-INF中的视图目录中。 样式表和其他静态资源都有资源。

我的index.jsp :(摘录)

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  <link rel="shortcut icon" href="<c:url value="/resources/images/logo-128x128.png" />" type="image/x-icon">
  <meta name="description" content="">
  <title>Home</title>
  <link href="<c:url value="/resources/tether/tether.min.css" />" rel="stylesheet">
  <link href="<c:url value="/resources/bootstrap/css/bootstrap.min.css" />" rel="stylesheet">
  <link href="<c:url value="/resources/bootstrap/css/bootstrap-grid.min.css" />" rel="stylesheet">
  <link href="<c:url value="/resources/bootstrap/css/bootstrap-reboot.min.css" />" rel="stylesheet">
  <link href="<c:url value="/resources/socicon/css/styles.css" />" rel="stylesheet">
  <link href="<c:url value="/resources/theme/css/style.css" />" rel="stylesheet">

</head>
<body>

  <section  class="header3 cid-qLfyYtuPvq mbr-fullscreen mbr-parallax-background" id="header3-j">





    <div class="container">
        <div class="media-container-row">
            <div class="mbr-figure" style="width: 100%;">
                <img src="<c:url value="/resources/images/custom-2-1620x1080.jpg"/>" alt="Test" title=""/>
            </div>

            <div class="media-content">
                <h1 class="mbr-section-title mbr-white pb-3 mbr-fonts-style display-1">
                    Test</h1>

                <div class="mbr-section-text mbr-white pb-3 ">
                    <p class="mbr-text mbr-fonts-style display-7">
                        Test. Test.</p>
                </div>
                <div class="mbr-section-btn"><a class="btn btn-md btn-primary display-4">OK</a>
                    <a class="btn btn-md btn-white-outline display-4" href="page1.html">DO</a></div>
            </div>
        </div>
    </div>

</section>

在我的CSS中我有:

 .cid-qLfyYtuPvq {
  background-image: url("<c:url value="/resources/images/custom-1-1620x1080.jpg"/>");
}

该页面能够在img标签中查找并加载样式表,custom-2图像。但无法加载外部样式表中指定的图像作为背景图像(custom-1)。请建议。

0 个答案:

没有答案