Div背景图无法显示及图片边框过大问题求助

嘿，我来帮你搞定这两个头疼的问题！咱们一步步拆解：

1. 容器背景图无法显示的原因及修复 #

你的CSS里background-image的写法有两个关键错误：

• 你把no-repeat、fixed这些背景属性直接塞在了background-image里，这是不对的——background-image只负责指定图片路径，其他背景行为属性要单独声明，或者用background缩写属性整合在一起。
• 路径里多了../，你用的是带https://的绝对URL，完全不需要加相对路径的../，这会导致浏览器识别错误路径，找不到图片。

另外原HTML里把.container放在了<body>标签外面，这不符合HTML规范，所有页面内容必须放在<body>内部！

修复后的容器CSS可以二选一：

/* 方式1：用background缩写属性，更简洁 */
.container{
  text-align: center;
  background: url("https://s25.postimg.org/exhm9rejz/galaxy-s8_overview_kv_type1.jpg") no-repeat fixed center;
  background-size: cover;
  width: 100%;
  min-height: 100vh; /* 改成min-height:100vh，让容器占满视口高度，避免内容太少时背景看不到 */
  margin: auto;
}

/* 方式2：分开写各个属性，更清晰 */
.container{
  text-align: center;
  background-image: url("https://s25.postimg.org/exhm9rejz/galaxy-s8_overview_kv_type1.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  margin: auto;
}

2. 摩托车图片边框过大的修复 #

.Motorcycle这个div默认是块级元素，width:auto会让它自动占满父容器的宽度，所以边框会拉得很宽。要让边框贴合图片尺寸，你可以：

• 把div的display改成inline-block，这样它的宽度会由内部内容（图片）决定；
• 或者给div设置width: fit-content（现代浏览器都支持），让宽度自动适配内容。

同时建议给图片加max-width:100%，避免图片超出容器范围：

.Motorcycle{
  margin: auto;
  display: inline-block; /* 关键：让div宽度贴合内容 */
  /* 也可以替换成 width: fit-content; */
  border: 1px solid grey;
  text-align: center;
}

.Motorcycle img{
  max-width: 100%;
}

完整修正后的代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
  <title>Random Quote Machine</title>
  <link rel="stylesheet" href="Random Quote Machine.css">
</head>
<body>
  <div class ="container">
    <div class="Motorcycle">
      <h1>Random Quote Machine</h1>
      <img src="https://s25.postimg.org/hxygqincv/Motorcycle_Helmet.jpg">
    </div>
  </div>
</body>
</html>

CSS #

.container{
  text-align: center;
  background: url("https://s25.postimg.org/exhm9rejz/galaxy-s8_overview_kv_type1.jpg") no-repeat fixed center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  margin: auto;
}

.Motorcycle{
  margin: auto;
  display: inline-block;
  border: 1px solid grey;
  text-align: center;
}

.Motorcycle img{
  max-width: 100%;
}

内容的提问来源于stack exchange，提问作者codebwoy