CSS背景图片不显示的常见原因及解决方案-html教程-PHP中文网

CSS背景图片不显示的常见原因及解决方案

当css中设置了背景图片但网页上不可见时，通常是因为元素缺乏明确的高度或宽度，导致其实际渲染尺寸为0，即使开发者工具中能看到样式声明也无法显示图片。

当css中设置了背景图片但网页上不可见时，通常是因为元素缺乏明确的高度或宽度，导致其实际渲染尺寸为0，即使开发者工具中能看到样式声明也无法显示图片。

在您提供的代码中，.nav-link-apple 类仅设置了 width: 1.6rem，但未定义 height。由于该元素是空的

（或内联元素），默认高度为 0，因此即使背景图片路径正确、样式已加载，也因容器“没有空间”而无法呈现。

✅ 正确写法应同时指定宽高，并确保 background 属性语法规范（避免重复声明）：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.nav-link-apple {
  width: 1.6rem;
  height: 1.6rem; /* 推荐与 width 一致，保持正方形图标 */
  background: url('./Logo.jpg') center / contain no-repeat; /* 优化写法：含尺寸缩放控制 */
}

⚠️ 注意事项：

路径问题：./Logo.jpg 是相对路径，需确认文件确实位于 CSS 文件所在目录的同级位置；若 CSS 通过引入，路径以 HTML 文件为基准，建议改用相对 HTML 的路径（如 images/Logo.jpg）或绝对路径。
重复 background 声明：原代码中 background: 4.4rem; 是无效值，会覆盖后续 background: url(...)，必须删除。
元素需有内容或尺寸：纯空标签（如
）必须显式设置 width 和 height，否则不占布局空间。
推荐使用简写语法：background: url(...) center / cover no-repeat; 中 / cover 可确保图片填满容器，contain 则完整显示图片（适合 Logo）。

? 小技巧：可在开发时临时添加 border: 1px solid red; 查看元素是否真实渲染，快速定位“隐形容器”问题。