Thymeleaf 模板语言th:style添加background样式

最新推荐文章于 2023-08-10 16:07:31 发布

走在It前端的小菇凉

最新推荐文章于 2023-08-10 16:07:31 发布

阅读量1.2w

点赞数 3

分类专栏：前端thymeleaf模板引擎

本文链接：https://blog.csdn.net/V199311/article/details/107247159

版权

本文介绍如何在Thymeleaf模板中使用th:style属性动态设置背景样式，特别是处理后台返回的缩略图作为背景时可能出现的问题。通过在th:style中加入条件判断，避免了缩略图字段为空导致的页面错误。

摘要由CSDN通过智能技术生成

后台返回缩略图设置成背景，th:style的background动态设置。
初始样式设置：

<div class="imgbox" 
th:style="background:url('thumbnai.jpg') no-repeat center center; background-size

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

走在It前端的小菇凉

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
7
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值

简简单单Onlinezuozuo

05-29

1万+

文章目录Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值1、设置背景2、直接嵌入样式代码 Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值 1、设置背景在设置时，要通过把样式属性分离开，然后通过表达式进行拼接的方式进行动态的设置，其它类似的...

Spring Boot基础学习笔记09：Thymeleaf模板引擎

howard2005的专栏

08-14

1074

1. 了解Spring Boot支持的视图技术； 2. 掌握Thymeleaf常用标签； 3. 掌握Thymeleaf标准表达式； 4. 掌握Thymeleaf基本使用； 5. 掌握使用Thymeleaf完成数据的页面展示

7 条评论您还未登录，请先登录后发表或查看评论

thymeleaf 基本语法

weixin_30595035的博客

06-17

772

四、标准表达式语法 · 简单表达式（simple expressions）　　${...} 变量表达式　　*{...} 选择变量表达式　　#{...} 消息表达式　　@{...} 链接url表达式 · 字面量　　'one text','another one!',... 文本　　0,34,3.0,12.3,... 数值　　true false 布尔类型...

thymeleaf 如何配置th:style属性动态设置背景图片

最新发布

yrldjsbk的博客

08-10

1397

thymeleaf 如何配置th:style属性动态设置背景图片！近期给公司网站改版了。需要动态给div标签设置背景图片。如图，这个黑色的部分，就是一个动态设置的背景图片，图片是美工师傅特殊处理过了，颜色看上去就是那种黑不溜秋的样子。借助于java，thymeleaf实现动态设置背景图的内容，分享到此结束。这个就是背景图的原图。

Thymeleaf中循环渲染List集合中的数字&th:style用法

zeng_0825的博客

10-14

3343

thymeleaf循环遍历数字 <ul th:each="user : ${userList}"> <li> <div th:each="star : ${#numbers.sequence(1,user.star)}"> <img th:src="@{/img/star.png}"> </div> </li> </ul> 2.thy..

Thymeleaf中给background的url设值语法报错问题

weixin_44389717的博客

11-25

2964

网上搜了很多资料，大多数都是这样子来写 <div th:style="'background:url(' + @{/img/1.jpg} + ');'> 可是我试了还是报错后面换了种方法，选择直接拼接 <div th:style="'background: url(' + '/img/1.jpg' + ');'> 这样子就不报错了，我认为可能是版本的问题，望大神指点 ...

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

debugtoday的博客

02-18

1972

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

SpringBoot学习笔记15 - Thymeleaf

weixin_39997438的博客

09-13

442

Thymeleaf是一个流行的模板引擎，该模板引擎采用 Java 语言开发。 Java 中常见的模板引擎有 Velocity、Freemaker、Thymeleaf 等。不同的模板引擎都会具有自己的特定的标签体系，而 Thymeleaf 以 HTML 标签为载体，在 HTML 的标签下实现对数据的展示。 Thymeleaf 本身与 SpringBoot 是没有关系的，但 SpringBoot 官方推荐使用 Thymeleaf 作为前端页面的数据展示技术，SpringBoot 很好地集成了这种模

thymeleaf简单使用文档

weixin_42250577的博客

03-10

947

1、变量 ${x}将返回x存储在Thymeleaf上下文中或作为请求属性的变量。 ${param.x}将返回一个称为的请求参数x（可能是多值）。 ${session.x}将返回名为的会话属性x。 ${application.x}将返回名为的Servlet上下文属性x。 2、不转义这是th:text属性的默认行为。如果我们希望Thymeleaf尊重我们的HTML标记而不是对其进行转义，则必须使用不同的属性：（th:utext用于“未转义的文本”）： <p th:utext="#{h

thymeleaf的th标签

08-24

thymeleaf的th标签大全

Thymeleaf常见用法，Thymeleaf手册

09-27

Thymeleaf常见用法，Thymeleaf使用手册，基于官方手册翻译

企业级信息系统开发讲课笔记4.9 Thymeleaf模板引擎

howard2005的专栏

06-12

1223

Thymeleaf设置背景图片

qq_51996813的博客

08-09

1725

在idea中thymeleaf的语法可能会出错，但是不影响展示，运行spring后在服务器中显示正常。这样写在html5中会找不到这个地址。

读取html th style,Thymeleaf 的 th:attr 和 th:style 属性的使用

weixin_34498545的博客

06-30

2387

一、th:attr设置标签属性，多个属性可以用逗号分隔例：1.后端接口:@GetMapping(value = "/welcome")public ModelAndView getWelcomeTitle() {ModelAndView modelAndView = new ModelAndView("welcome.html");modelAndView.addObject("attr1", "...

thymeleaf模板页中背景图设置

追的博客

08-04

5717

平常我们在html中设置背景图片一般是这样： <body style="background-image:url(images/light.png);"> 但在thymleaf 中这样是行不通的，即便你能在html中点开并能看到图片，等你把项目跑起来就会发现没有效果。所以应该改成这样一： <body th:style="'background-image: url(./light.png)'"> 不要忘了在html中引入thymleaf 。还有一种更粗暴的方法...

Thymeleaf基本知识

说：/~不了的专栏

09-21

724

转自:http://www.cnblogs.com/dreamfree/p/4158557.html Thymeleaf是个XML/XHTML/HTML5模板引擎，可以用于Web与非Web应用。 Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，

如何在thymeleaf模板中设置全屏背景图

qq_44927264的博客

03-24

1897

首先设置body的style属性 <body th:style="'background-image: url(/images/background.jpg)'"> 注意：html在tempates目录下，图片在 static/images 目录下然后设置css属性 html,body { height: 100%; width: 100%; } body{ background-size: 100%, 100%; } 第二种直接在css中写 html,.

Thymeleaf常用的th标签属性

梦里逆天的博客

05-19

6454

标签属性功能描述示例 th:id 替换id <input th:id="'xxx' + ${collect.id}"/> th:text 文本替换 <p th:text="${collect.description}">description</p> th:utext 支持html的文本替换 <p th:utext="${htmlcontent}">content</p> th:object 替换对象 <div...

<div class="item" th:each="event : ${events}"> <img class="ui avatar image" style="width: 45px;height: 45px" th:src="${event.data.headerUrl}" > <div class="content"> <div class="ui teal header" th:text="${event.data.nickname}" style="display: inline-block;">小圳</div> <span style="display: inline-block;">回复了你的评论</span> <div class="description" th:text="${event.data.content}">点点关注不迷路</div> <a href="#"><span>博客标题</span></a> </div> <div class="extras" style="float: right;"> <span>2021-10-15</span> <i class="trash icon"></i> </div> </div> 上面的代码中，要是 th:text="${event.data.content}" 里面的内容太长了，页面显示就都乱了，如何解决

05-26

如果`th:text="${event.data.content}"`的内容太长，可能会导致布局出现问题。一种解决方法是使用CSS的文本截断属性`text-overflow`，将文本超出部分隐藏，并在末尾添加省略号。可以通过以下方式来设置： ```css .description { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏溢出部分 */ text-overflow: ellipsis; /* 在结尾处添加省略号 */ max-width: 200px; /* 最大宽度 */ } ``` 其中，`max-width`可以根据实际需要进行调整，以保证布局的美观。如果需要显示完整的内容，可以在鼠标悬停时显示完整的文本，可以使用CSS的`::before`和`::after`伪元素来实现，例如： ```css .description:hover::before { content: attr(data-content); position: absolute; top: 0; left: 0; background-color: #fff; padding: 5px; border: 1px solid #ccc; z-index: 1; } .description:hover { position: relative; } ``` 这样，当鼠标悬停在元素上时，会显示完整的文本内容。