1、当背景图样式处于行内时,此时我们又需要使用Thymeleaf获取后台图片数据时可使用如下代码
<section class="section-top" th:each="advertise : ${commonContent.advertiseList}" th:style="'background: url(' + |*{imgSourcePath}${advertise.pic}|+'); background-size:cover; background-position: center center;background-attachment:scroll;'">
2、注意上述写法是基于背景图片张数较多情况下,利用了th:each进行循环输出,当图片为单个时可用如下代码:
<section class="section-top" th:style="'background: url(' + |*{imgSourcePath}${singleBannerUrl}|+'); background-size:cover; background-position: center center;background-attachment:scroll;'">
单个图片不确定是否存在时可加入如下判断:
th:if="${singleBannerUrl}!=null"
3、完结。
-----------------------------------------------------------------------------------------------------------------------分割线
补充内容:背景图片样式属性
1、background-attachment
background-attachment:scroll;
background-attachment:定义背景图片随滚动轴的移动方式,具有如下取值:
取值: scroll | fixed | inherit
含义如下:
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值: scroll
继承性: 否
适用于: 所有元素
2、background-size:cover
background-size:cover;
background-size:cover:用来定义背景图显示尺寸大小
取值:cover | 100% | contain | length | percentage
含义如下:
contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位中。(背景的宽度撑满整个屏幕),是按照等比缩放铺满整个区域。如果显示比例和显示区域的比例相差很大某些部分会不显示,比如长度比宽度大很多,则宽度左侧会有一部分不显示。
length:设置背景图像的高度和宽度。如果只设置一个值,则第二个值会被设置为“auto”。
percentage:以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值,则第二个值会被设置为“auto”
100%:长宽100%显示,可能会拉升图片。
3、background-position
background-position;
background-position:设置背景图像的起始位置
| 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
4、若效果不理想,可尝试一下方法,设置样式
<style>
.services-section{
background: url("[[@{|*{resourcePath}|}]]assets/images/background/bg-3.jpg");
}
</style>