是否可以向 <div> JSP 页面上的元素添加背景图像? - 春天


元素? - 春天。

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

<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 作为背景图像?

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

网页代码

<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>

将一个类写入div 并编写 css。 设置响应能力的宽度和高度。删除引导类"img 响应"。

.HTML:

<div class="yourclassname">

.CSS:

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

感谢@Wisely为我指出正确的方向,

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

该目录

<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;

}

最新更新