是否可以将背景图像添加到 JSP 页面上的 <div> 元素？ - 春天答案

【问题标题】：Is it possible to add a background image to a <div> element on a JSP page? - Spring是否可以将背景图像添加到 JSP 页面上的 <div> 元素？ - 春天
【发布时间】：2017-03-30 10:41:24
【问题描述】：

我这几天一直在寻找这个问题的答案，但似乎找不到解决方案。下面是我尝试实现的示例，但是没有显示图像。目的是让响应式图像覆盖整个页面。

<div class="col-md-12 img-responsive" 
style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />);">

据我所知，这应该可以工作，我已经实现了资源映射并且正在工作，我可以通过导航到 url 来判断这一点并显示图像。

当将此标签放入带有background 属性的body 元素中时，它会显示图像但不响应并随意剪切图像。我已经尝试使用引导程序和使用我自己的 css 来设置它的样式，但是我所做的任何事情都不会改变/完全删除图像。

这个 url 也适用于 <img> 标签，除非我不能轻松覆盖其他元素。

最后我的问题是如何让 div 元素使用纯 css 来接受这个 url 作为背景图片？

欢迎任何建议/先前的经验。

HTML 代码

<body background="">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 header_bar">
            <div class="col-md-6 text-left">
                <a href="#" class="nav_login">Home</a>
            </div>
            <div class="col-md-6 text-right">
                <a href="#" class="nav_login">log in</a>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">                                           
    <div class="row">
        <div class="col-md-12 img-responsive" style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />);">
        </div>                                          

    </div>
</div>

【问题讨论】：

呈现出来的 HTML 是什么样子的？日志或控制台中是否有任何错误？
没有错误也没有警告。我已经添加了 HTML，所以你可以看到。
HTML 没有显示 JSP 已将 c:out 替换为正确的 URL - 您显示的 HTML 是实际的视图源吗？
当我导航到 localhost:8080/someapplication/resources/img/abstract-ice.jpeg 时，会显示图像。我刚刚解决了这个问题，虽然我不确定如何或为什么，删除“img-respoinsive”引导类导致图像加载正确。

标签： html css spring jsp

【解决方案1】：

给div写一个class，写css。设置响应的宽度和高度。删除引导类“img-responsive”。

即

HTML：

<div class="yourclassname">

CSS：

.yourclassname
{
background-image:<c:url value="/resources/img/abstract-ice.jpeg" />
width: 100%;
height: auto;
}

【讨论】：

这个链接不起作用，因为它是 Spring Web 应用程序中的 JSP 页面，必须通过标签获取资源。但是，尝试您的建议（删除引导类）确实会显示图像！我不确定为什么“img-responsive”会导致图片无法加载，但谢谢！
确定我已经编辑了答案。在使用 bootstrap 时，有时我们必须使用我们使用的 html 相应地调整代码。编写自定义 CSS 总是有帮助的。
如果我的回答对你有帮助，别忘了点赞或接受回答：）谢谢。
是的，但是您提供的 css 不起作用，因为 css 文件无法访问标记。它必须在 jsp 页面上声明。像这样：

【解决方案2】：

感谢@Wisely 为我指明了正确的方向，

通过从我试图添加背景图像的 div 中删除引导类来解决这个问题。

HTML

<div class=" yourClassName" style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />)"></div>

CSS

.yourClassName {
height:100px;
width:100px;
background-size: cover;
background-repeat: no-repeat;

}

【讨论】：