在 html 中设置背景图片的方法有三种：1. 使用内联样式直接在 html 元素中设置 background-image；2. 创建 css 类或 id 来管理背景样式，实现更易维护的代码结构；3. 通过
在 HTML 中设置背景图片，你可以直接在 HTML 元素的 style 属性中，或者在 CSS 样式表中设置 background-image 属性。最直接的方法就是内联样式，但通常我们会用 CSS 类或者 ID 来管理样式，这样更方便维护。
解决方案
首先，最简单的方法是直接在 HTML 标签中使用 style 属性：
立即学习“前端免费学习笔记（深入）”；
<div style="max-width:90%"your-image.jpg');"> 这里是你的内容 </div>
但更好的做法是将样式定义在 CSS 中。你可以创建一个 CSS 类，然后在 HTML 元素中引用它：
.my-background { background-image: url('your-image.jpg'); /* 其他样式，例如背景重复方式、位置等 */ background-repeat: no-repeat; /* 防止图片重复 */ background-size: cover; /* 图片填充整个容器 */ background-position: center; /* 图片居中显示 */ }
然后在 HTML 中：
<div class="my-background"> 这里是你的内容 </div>
或者，你也可以在
HTML 背景图无法显示？排查这些点！
-
路径问题： 这是最常见的问题。确保你的图片路径是正确的。相对路径是相对于你的 HTML 文件的位置。绝对路径虽然简单，但一旦网站迁移，就可能失效。建议使用相对路径，并仔细检查文件名和文件目录是否正确。大小写也可能导致问题，特别是在 linux 服务器上。
-
CSS 语法错误： 检查你的 CSS 语法是否正确。比如 background-image: url(‘your-image.jpg’); 中的 url() 函数，括号和引号都不能省略。另外，确保 CSS 选择器正确地应用到了你想要设置背景的元素上。
-
图片格式不支持： 确保你使用的图片格式是被浏览器支持的，常见的格式包括 JPG, PNG, GIF, SVG 等。如果使用不常见的格式，可能会导致显示问题。
-
层叠问题： 如果你的背景图被其他元素遮挡了，它自然无法显示。检查是否有其他元素的 z-index 值更高，或者是否有其他元素的背景色覆盖了你的背景图。
-
缓存问题： 浏览器可能会缓存旧的 CSS 文件或图片。尝试清除浏览器缓存，或者使用 Ctrl+Shift+R (windows) 或 Cmd+Shift+R (Mac) 强制刷新页面。
如何让背景图片自适应屏幕大小？
要让背景图片自适应屏幕大小，background-size 属性是关键。
- background-size: cover;：这个属性会让背景图片尽可能地覆盖整个容器。如果图片比例和容器比例不一致，图片可能会被裁剪。
- background-size: contain;：这个属性会让背景图片完整地显示在容器中。如果图片比例和容器比例不一致，容器可能会出现空白区域。
- background-size: 100% 100%;：这个属性会让背景图片拉伸或压缩到容器的尺寸。但这样做可能会导致图片变形，所以不推荐使用。
除了 background-size 之外，你还可以结合 background-position 属性来控制背景图片的位置。例如，background-position: center; 可以让背景图片在容器中居中显示。
如何实现背景图片固定不动，内容滚动？
这个效果可以通过 background-attachment 属性来实现。将 background-attachment 设置为 fixed，背景图片就会相对于视口固定，而页面的内容可以滚动。
body { background-image: url('your-image.jpg'); background-attachment: fixed; background-size: cover; /* 建议同时设置 background-size */ }
需要注意的是，background-attachment: fixed; 在某些移动设备上可能存在兼容性问题。如果需要在移动设备上实现类似的效果，可能需要使用 JavaScript 来模拟。另外，background-attachment: local; 也可以实现类似效果，但它会让背景图片随着元素内容滚动，而不是相对于视口固定。
