springboot 添加背景图片

最新推荐文章于 2023-10-19 13:28:09 发布
最新推荐文章于 2023-10-19 13:28:09 发布
阅读量3.9k 收藏 21
点赞数 4
分类专栏： springboot学习笔记 文章标签： eureka 云原生 cloud native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43718758/article/details/123289401
版权

1.目录结构

在这里插入图片描述
1.图片不能放到templates中，自己试了显示不出来

2.背景设置

背景的方式
背景的路径和位置很重要，否则显示不出来
结果：在这里插入图片描述
图片没有自适应
我们在body中单独设置

<body style="	background-repeat:no-repeat ;
				background-size:100% 100%;
				background-attachment: fixed;">

实现效果：
在这里插入图片描述
完整显示

参考文章：https://blog.csdn.net/qq_36481052/article/details/79075214
参考文章：https://blog.csdn.net/qq_39985298/article/details/89521277?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164644173516780261939349%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164644173516780261939349&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v1~rank_v31_ecpm-2-89521277.pc_search_result_cache&utm_term=springboot+html%E8%83%8C%E6%99%AF%E8%87%AA%E9%80%82%E5%BA%94&spm=1018.2226.3001.4187

吓得吃小手手
关注
  • 4
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
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、设置背景 在设置时，要通过把样式属性分离开，然后通过表达式进行拼接的方式进行动态的设置，其它类似的...
springboot新能源汽车运行状态数据管理系统191516（附源码+数据库）
09-22
管理员模块： 添加用户：根据手机号或邮箱验证码进行注册，验证密码难度保证数字和英文都有，验证当前手机号或邮箱是否登录邮箱和手机号为数据库唯一ID、 删除用户：清楚用户所有信息包括汽车方面、 批量导入、 汽车管理：能够对汽车进行增删，可以对汽车进行重命名，对用户下的汽车可以进行检索，能够在汽车列表中直接查看车辆剩余电量等省略信息，汽车将会有唯一ID，可以有多个用户进行绑定，但是有且仅有一个具有该车的管理员权限、 车主信息：能够记录用户名，生日，性别等，并且在登陆之后显示，并能对其进行修改、 权限日志：对汽车进行启动，开锁等操作都为用户的管理权限，其他绑定用户在操作时会对用户发出警告，这些权限也只有车主可以赋予、 日志管理。 在用户打开界面且未登录时，将会提示登录，且预览一些新能源汽车的信息。 在用户登录之后，主页将在右上角显示用户的头像，点击可以查看用户的信息。并且主页显示用户的新能源车辆，在一个都没有时，则显示一个加号，提示用户进行添加。 在车辆添加界面，可以进行汽车的行驶证检验，来绑定汽车的管理员权限。在无输入时，则只有查看的权限。且当前车辆如果没有管理员进行注册是不可以被绑定的。
Spring Boot 设置代码背景图
叱咤少帅的博客
09-10 1825
（1） 为了让背景图好看，我们首先设置主体颜色为黑色。 File--->Setting--->Theme（Darcual） （2）通过设置快捷键打开图片设置按钮。 （3）打开图片设置按钮找到图片。 （4）看效果图 所使用的背景图片我贴出如下： ...
新手使用spring boot 做的一个登录页面 的心得
热门推荐
シ❤゛甜虾的个人博客
10-24 1万+
很久之前在学校学过jsp和三大框架，之后就在也没接触过web项目，最近公司项目需要做一个web版的数据展示界面，想想用ASP呢还是用JSP，后来发现这些都已经过时了，现在都流行微服务，本来就没有什么WEB开发经验，可把我难坏了，狂补一些前端后端的知识，先看一下登录界面，也是网上copy的代码，自己找的图片，前端用的bootstrap 工程目录是这个样子的 &lt;!DOCTYPE htm...
Spring Boot制作简单而又超炫的的注册登录页面
黎鉴洪的博客
05-21 6795
教你制作Spring Boot简单而又超炫的的注册登录页面，下面的演示Spring Boot（Demonor）的注册登录页面 Demonor.zip（下载） 一 . 注册页面        1 . 添加了背景音乐功能        2. 添加了swf格式的动态背景        3 添加了改变背景颜色功能 二 . 登录页面        1 . 添加了改变背景
Springboot访问静态资源文件的html以及图片
紫月i的博客
04-06 2259
Springboot的静态资源文件夹是项目的resource目录下的static文件夹，并且Springboot会默认开放静态资源文件，不需要做什么设置 想要访问静态资源文件需要先导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency&g
IDEA：在JSP中添加背景图片，解决JSP中背景图片不显示问题 （部署一下Tomcat即可）
最新发布
m0_62516582的博客
10-19 1552
IDEA：在JSP中添加背景图片，解决JSP中背景图片不显示问题 （部署一下Tomcat即可）
springboot项目html加载linux服务器本地图片
lCSDNkingdoml的博客
06-22 1356
springboot项目html加载linux服务器本地图片 将springboot项目部署在阿里云服务器上后，项目中的html页面需要加载存放在服务器的图片 大概描述一下我的情况： 项目中，html文件<img 通过 th:src 获取图片路径。图片路径存放于MySQL数据库中，图片存放在云服务器的/root/images下。现在需要html页面通过数据库中的图片路径，将图片加载到页面。 解决的办法算挺简单的： 配置静态资源的位置 在自己实现WebMvcConfigurer接口的类中加入如下方法
springboot映射图片到html
KingEverything的博客
11-18 197
1.controller @RequestMapping("/toindex") public String getEdit(Model model){ List<banner> bannerData = bannerService.findAll(); model.addAttribute("bannerData",bannerData); ...
springboot-music.zip
04-30
一个基于SpringBoot+Mybatis+MySQL5.7的轻语音乐网站项目 1.主要用到的技术： 使用maven进行项目构建 使用Springboot+Mybatis搭建整个系统 ...播放页面背景为模糊背景，根据歌手的专辑图片自动变化。
基于SpringBoot+Mybatis+MySQL5.7的音乐网站
04-27
播放页面背景为模糊背景，根据歌手的专辑图片自动变化。 问题：如何启动本系统？ 将sql文件在MySQL运行生成表和数据 最后直接启动SsApplication类后访问http://localhost:8082/index.html 就可以进入本系
java（springBoot）视频处理，视频剪辑（对视频，音频，字幕等处理）
07-01
源码中有说明文档，按照文档...源码中包括有视频合成，视频加背景音乐，多图片+音频合并为视频，音频合并，视频加字幕，视频去声音，视频格式转换，视频播放，视频裁剪，获取音频或视频信息，定义视频大小，视频截图
基于springboot的二次元商品销售网站.zip
06-10
（6）我喜欢的：在我喜欢的中，将展示用户在选择商品以及对商品进行查看时根据自己的喜好将商品添加至我的喜爱列表，列表栏目里展示的信息有图片以及商品名称，同时用户也可以将其移除我喜欢的商品列表。 后台管理...
Java第二期轻语音乐系统 Springboot
06-28
榜单列表模块：动态地从数据库中获取歌曲的链接和数据在榜单中显示 歌曲搜索模块：在首页的搜索框中可以输入关键字进行歌曲的模糊搜索 ...我的音乐模块：收藏的歌曲...播放页面背景为模糊背景，根据歌手的专辑图片自动变化
Vue3+SpringBoot实现【登录】【毛玻璃】【渐变色】
qq_53478650的博客
02-11 1231
如果想要登录框为毛玻璃，可以将上面第二个div的 “background-color: #fff;如果想要退出登陆，其实很简单，给退出绑定一个router-link就可以了。然后把这个div设置为class=login，编写login类的样式如下。效果： （如果换一个比较鲜艳的背景，毛玻璃效果会更明显）首先创建Login.vue，编写界面和样式。绑定登陆按钮的点击时间login。这个是渐变色背景，登陆框背景为白色。设置Login.vue的路由。定义一个UserDto类。
spring boot + mybatis + spring security（自定义登录界面）环境搭建
adsadadaddadasda的博客
03-09 863
概述在前不久用了spring boot、mybatis、spring security搭建了一个工程，中间经历了各种坑，最后得到一条经验：spring的文档很详细，入门最好以官方文档为准。这里讲的是以mav作为依赖管理工具pom搭建spring boot应用快捷的方式是在pom.xml中引入spring-boot-starter-parent 作为parent，如下：[java] view pla...
0、STS工具，SpringBoot的背景图片设置
qq_40203483的博客
10-25 1818
SpringBoot的背景图片设置 1.图片放置: 2.CSS样式设置 .MPart StyledText { background-image: url(./1.jpg); background-color: white; background-position: no-repeat; color: black; }
springboot整合mybaits-plusmybaits实现用户登陆界面（适合入门）+唯美界面
SpongeBob_shouse的博客
02-04 1784
基于springboot+mybaits+thymleaf模版 创建的用户登陆比较适合入门学习
Springboot+Linux上传并显示图片
06-10
首先，你需要在Springboot项目中配置文件上传功能，可以使用Spring MVC中的MultipartFile类来实现。下面是一个简单的上传文件的示例代码： ```java @PostMapping("/upload") public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) { String fileName = StringUtils.cleanPath(file.getOriginalFilename()); try { // 保存文件到服务器 Files.copy(file.getInputStream(), this.rootLocation.resolve(fileName)); } catch (IOException e) { throw new RuntimeException("Failed to store file " + fileName, e); } return ResponseEntity.ok().body("File uploaded successfully: " + fileName); } ``` 其中，`rootLocation`是文件上传的目标目录。 接着，你需要在Linux系统中配置一个Web服务器来让上传的图片能够被访问到。我们这里使用Nginx作为Web服务器。 在Nginx的配置文件中添加以下代码： ``` server { listen 80; server_name example.com; location /uploads/ { alias /path/to/uploads/directory/; autoindex on; } } ``` 其中，`/path/to/uploads/directory/`是你在Springboot项目中配置的文件上传目录。 最后，你可以在前端页面中通过以下代码来显示已经上传的图片： ```html <img src="http://example.com/uploads/filename.jpg" alt="image" /> ``` 其中，`http://example.com/`是你的服务器地址，`filename.jpg`是上传的图片文件名。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值