springboot 添加背景图片

最新推荐文章于 2023-11-26 21:16:28 发布
最新推荐文章于 2023-11-26 21:16:28 发布
阅读量4.3k 收藏 26
点赞数 4
分类专栏： springboot学习笔记 文章标签： eureka 云原生 cloud native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43718758/article/details/123289401
版权
本文介绍了如何在SpringBoot的HTML页面中正确设置背景图片并实现自适应显示。通过调整body样式，设置`background-repeat:no-repeat`，`background-size:100% 100%`和`background-attachment:fixed`，可以确保图片完整且适应页面大小。参考了两篇CSDN博客文章来解决显示问题。
摘要由CSDN通过智能技术生成

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
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
springboot 设置自定义启动banner背景图 教程
洛阳泰山的博客
08-12 4040
Spring Boot中的banner是在应用程序启动时显示的一个ASCII艺术字符或文本。它被用来给用户展示一些关于应用程序的信息，例如名称、版本号或者公司标志等。 使用Spring Boot的默认设置，如果项目中有一个名为“banner.txt”的文件放置在classpath下的“/META-INF”目录中，那么这个文件的内容将会被用作应用程序的banner。
springboot获取静态图片路径_Springboot通过图片路径形式获取图片
weixin_39982452的博客
12-21 3463
Springboot通过图片路径形式获取图片一致以来都是用 http://127.0.0.1:8888/getPhoto?imgUrl=1.jpg 的形式获取数据，今天突然要 http://127.0.0.1:8888/getPhoto/1.jpg 这样获取图片数据，竟然有点懵逼了。直接贴代码：@RequestMapping(value = "/getPhoto/{imgUrl:[a-zA-Z0-...
Spring Boot 设置代码背景图
叱咤少帅的博客
09-10 1919
（1） 为了让背景图好看，我们首先设置主体颜色为黑色。 File--->Setting--->Theme（Darcual） （2）通过设置快捷键打开图片设置按钮。 （3）打开图片设置按钮找到图片。 （4）看效果图 所使用的背景图片我贴出如下： ...
0、STS工具，SpringBoot的背景图片设置
qq_40203483的博客
10-25 1858
SpringBoot的背景图片设置 1.图片放置: 2.CSS样式设置 .MPart StyledText { background-image: url(./1.jpg); background-color: white; background-position: no-repeat; color: black; }
springboot结合thymeleaf插入背景图片
weixin_38568503的博客
11-16 6926
问题描述： 做首页的时候想做一个背景图片。然后使用thymeleaf模板不知道怎么弄了，网上找了好多资料，发现不好使。 原因分析： 我们的html在templates下，我们的js,css在static目录下，这里就不同于静态资源那样把所有的东西都放在static下那样直接访问。 static下的代码： <div class="detail" style="background-image: url(img/img1.jpg)"></div> 解决方案： templates下的h
springboot项目html加载linux服务器本地图片
lCSDNkingdoml的博客
06-22 1414
springboot项目html加载linux服务器本地图片 将springboot项目部署在阿里云服务器上后，项目中的html页面需要加载存放在服务器的图片 大概描述一下我的情况： 项目中，html文件<img 通过 th:src 获取图片路径。图片路径存放于MySQL数据库中，图片存放在云服务器的/root/images下。现在需要html页面通过数据库中的图片路径，将图片加载到页面。 解决的办法算挺简单的： 配置静态资源的位置 在自己实现WebMvcConfigurer接口的类中加入如下方法
springboot控制层图片验证码生成
08-27
SpringBoot控制层图片验证码生成 SpringBoot控制层图片验证码生成是指在SpringBoot框架中生成图片验证码的过程。图片验证码是一种常见的身份验证机制，用于防止机器人和恶意攻击。下面将详细介绍图片验证码的生成...
springboot中thymeleaf模板使用详解
08-30
SpringBoot 中 Thymeleaf 模板使用详解 Thymeleaf 是新一代的模板引擎，在 Spring4.0 中推荐使用 Thymeleaf 来做前端模板引擎。Thymeleaf 有三个极吸引人的特点：支持 HTML 原型，开箱即用的特性和提供 Spring 标准...
java（springBoot）视频处理，视频剪辑（对视频，音频，字幕等处理）
07-01
源码中有说明文档，按照文档...源码中包括有视频合成，视频加背景音乐，多图片+音频合并为视频，音频合并，视频加字幕，视频去声音，视频格式转换，视频播放，视频裁剪，获取音频或视频信息，定义视频大小，视频截图
Springboot通过模板生成pdf文档带图片
weixin_42600165的博客
10-12 1110
标题Springboot利用itext通过模板生成pdf文档带图片功能
spring boot+html访问图片
凌风少年z
09-17 1183
刚开始接触时，总是提示无法载入图片，百度尝试过很多解决办法，一般都是修改配置文件指定一下静态资源路径，例如在配置文件加入： spring.resources.static-locations=‘静态资源路径’ 但我有点不一样，可能是因为开发工具版本不一样，我在application.yml配置文件中，加入类似代码： spring: web: resources: static-locations: classpath:/ 看一下我的图片目录： login.html页面： 然后
spingboot html 图片,SpringBoot添加对静态文件css/html/jpg等的直接访问的支持
weixin_34832116的博客
06-05 339
请直接看四、解决对策，希望本文解决你的问题------正文------一、背景现在网上大多讨论的是对SpringBoot使用由freemarker等模板引擎渲染出的html网页的静态访问的支持。但是对于一个前后端分离的项目，比如前端使用vue、React等写，后端使用Spring家族技术等，往往开发者选择将前端开发的网页通过webpack等直接打包成含组成网页的静态文件的文件夹然后交到后端同学手中...
Springboot访问静态资源文件的html以及图片
紫月i的博客
04-06 2346
Springboot的静态资源文件夹是项目的resource目录下的static文件夹，并且Springboot会默认开放静态资源文件，不需要做什么设置 想要访问静态资源文件需要先导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency&g
Spring Boot制作简单而又超炫的的注册登录页面
黎鉴洪的博客
05-21 6824
教你制作Spring Boot简单而又超炫的的注册登录页面，下面的演示Spring Boot（Demonor）的注册登录页面 Demonor.zip（下载） 一 . 注册页面        1 . 添加了背景音乐功能        2. 添加了swf格式的动态背景        3 添加了改变背景颜色功能 二 . 登录页面        1 . 添加了改变背景
IDEA：在JSP中添加背景图片，解决JSP中背景图片不显示问题 （部署一下Tomcat即可）
m0_62516582的博客
10-19 1983
IDEA：在JSP中添加背景图片，解决JSP中背景图片不显示问题 （部署一下Tomcat即可）
基于SpringBoot的高清壁纸图片站
最新发布
abc6838的博客
11-26 1100
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
Springboot居然可以设置动态的Banner！！（悄悄滴~）
公众号 Java4ye
02-13 641
Springboot 源码阅读解析之 打印动态的 Banner~ 春节 ）神秘代码①（
spring-boot web应用（实现图片旋转、放大）
textboy的专栏
08-19 1925
这里用到 artZoom.js，这JS插件可以旋转、放大图片。 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM
eclipse 右键项目为什么没有properties菜单_SpringBoot入门建站全系列（一）项目建立...
weixin_39777163的博客
11-26 555
SpringBoot入门建站全系列（一）项目建立个人对SpringBoot的理解：就是一Spring大杂烩，把Spring的一些组件，或者跟Spring有联系的组件整合在一起，方便使用。如果大家正在寻找一个java的学习环境，或者在开发中遇到困难，可以加入我们的java学习圈，点击即可加入，共同学习，节约学习时间，减少很多在学习中遇到的难题。一、新建Maven项目本例使用eclipse来建立mav...
springboot生成图片
10-15
可以使用Java的BufferedImage类来生成图片，Spring Boot中可以使用Thymeleaf模板引擎来渲染图片。具体步骤如下： 1. 在pom.xml文件中添加以下依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> ``` 2. 创建一个Controller类，用于处理请求并生成图片： ```java @Controller public class ImageController { @GetMapping("/image") public void generateImage(HttpServletResponse response) throws IOException { // 创建一个BufferedImage对象 BufferedImage image = new BufferedImage(200, 200, BufferedImage.TYPE_INT_RGB); // 获取Graphics2D对象 Graphics2D g2d = image.createGraphics(); // 设置背景色为白色 g2d.setColor(Color.WHITE); g2d.fillRect(0, 0, 200, 200); // 绘制一个矩形 g2d.setColor(Color.RED); g2d.drawRect(50, 50, 100, 100); // 释放资源 g2d.dispose(); // 将图片输出到浏览器 response.setContentType("image/png"); ImageIO.write(image, "png", response.getOutputStream()); } } ``` 3. 创建一个Thymeleaf模板，用于显示图片： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Image</title> </head> <body> <img th:src="@{/image}" alt="Image"> </body> </html> ``` 4. 启动应用程序并访问http://localhost:8080/，即可看到生成的图片。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值