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