Thymeleaf实现行内背景样式，补充行内样式属性

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：设置背景图像的起始位置

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"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>

Thymeleaf实现行内背景样式，补充行内样式属性

相关推荐