如何在 CSS 的其余部分同时显示在 CSS 中加载的背景图像
Posted
技术标签:
【中文标题】如何在 CSS 的其余部分同时显示在 CSS 中加载的背景图像【英文标题】：How to show a background image loaded in CSS at the same time as the rest of the CSS 【发布时间】：2022-01-01 07:10:41 【问题描述】：我创建了一个小型 spring-boot 应用程序，它只实现了一个登录表单。
当我在运行我的应用程序时在 http://localhost:8080/login 上打开浏览器时，会加载一个 login.html 页面，该页面引用一个 css 文件，如下所示：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Form</title>
<link href="css/login.css" rel="stylesheet">
</head>
css 表单正在加载图片作为背景：
body
background: url("../imgs/backgroundImage.jpg");
background-size: cover;
所有这些都可以正常工作。然而，背景图像的加载速度有点慢，比登录表单慢。这是不愉快的，这就是我想改变它的原因。由于我无法进一步压缩我的图像，我想，也许将图像加载到我的 html 文件中会比引用外部样式表快一点。这就是为什么我从我的外部 css 文件中删除了背景部分，并在我的 login.html 的头部包含了以下样式标签：
<style>
body
background: url("static/imgs/backgroundImage.jpg");
background-size: cover;
</style>
现在背景图像根本不加载。我不明白为什么图像根本不显示，我希望这里有人能解释一下。
资源的位置如下：
resources
static
css
login.css
imgs
backgroundImage.jpg
templates
login.html
【问题讨论】：
您将收到的任何答案都不会在这里为您提供帮助，因为您需要了解这正是事情应该如何表现...我在谈论速度问题..图片不起作用是因为你输入了错误的路径......关于速度......在这里阅读第一个答案：***.com/questions/492809/… - 基本上如果你想一起加载东西，你需要使用 IMG 标签，但这只会有助于制作内容同时出现可能会更糟！ - 你的图片有多大？ @Shlomtzion：原始图像大约 3MB，压缩后的图像有 1.3 MB。我真的很想知道它是如何在工业中完成的。例如，netflix 登录页面显示了一个覆盖整个屏幕的背景图像，我不等待背景图像加载。 仅供参考，你说的netflix图片是这样的吗？ assets.nflxext.com/ffe/siteui/vlv3/… 这是全屏 344kbs jpg...也许您没有正确压缩...使用保存为网络功能怎么样？！ :) 好的，谢谢参考！ 【参考方案1】：你把你的风格标签放在哪里？在您的 css 文件链接之前或之后？如果您为您的身体使用背景属性，请检查您是否将其放在您的 css 链接之后，否则它将被覆盖。或者使用“背景图片”。
事实上，它不会更快或不明显。当您的 css 文件和图片第一次加载时。它已缓存在您的浏览器中。
【讨论】：
【参考方案2】：url("static/imgs/backgroundImage.jpg") 表示“backgroundImage.jpg”文件位于“static”文件夹中，然后是“imgs”文件夹 - 在当前文件夹中或url("/templates/static/imgs/backgroundImage.jpg")。那不是背景图像所在的位置。事实上，该路径是无效的，我认为应该在控制台中抛出 404 错误。
正确的路径是url("/static/imgs/backgroundImage.jpg")，前导/ 将您向上移动到文档根文件夹。然后路径的其余部分是相对于根的。
这假定您在问题中显示的层次结构中的“资源”文件夹是文档根目录。
【讨论】：
【参考方案3】：确定<style> 标签是否在<head> 标签内。
确保您的图片网址正确，如果正确，请像这样尝试（在网址前添加./）：
background: url("./static/imgs/backgroundImage.jpg");
它应该可以工作，但如果你仍然有问题，
将图片移动到与 HTML 文件相同的文件夹中，并将 URL 更改为：
background: url("backgroundImage.jpg");
尝试更改图像以确保
【讨论】：
以上是关于如何在 CSS 的其余部分同时显示在 CSS 中加载的背景图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Swift 3 中加载带有 HTML 的 CSS 文件？