springboot 添加背景图片

最新推荐文章于 2025-03-09 14:50:32 发布

吓得吃小手手

最新推荐文章于 2025-03-09 14:50:32 发布

阅读量4.9k

点赞数 4

分类专栏： springboot学习笔记文章标签： eureka 云原生 cloud native

本文链接：https://blog.youkuaiyun.com/qq_43718758/article/details/123289401

版权

springboot学习笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在SpringBoot的HTML页面中正确设置背景图片并实现自适应显示。通过调整body样式，设置`background-repeat:no-repeat`，`background-size:100% 100%`和`background-attachment:fixed`，可以确保图片完整且适应页面大小。参考了两篇优快云博客文章来解决显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.目录结构

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

2.背景设置

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

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

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

参考文章：https://blog.youkuaiyun.com/qq_36481052/article/details/79075214
参考文章：https://blog.youkuaiyun.com/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-2_allfirst_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