如何将标题等文本添加到网页背景图片上？对应HTML/CSS代码如何调整？

当前实际效果（非全屏截图，图片分辨率5498x3615） #

方案1：将图片设为父容器背景（更推荐） #

直接把背景图绑定在body或者包裹文本的父元素上，不需要额外的img标签，写法更简洁，也方便控制文本位置。

body {
  /* 替换为你的背景图地址 */
  background-image: url("https://via.placeholder.com/1200x600");
  background-repeat: no-repeat;
  /* 背景图覆盖整个容器 */
  background-size: cover;
  background-position: center;
  /* 最小高度设为视口高度，保证背景完整显示，可根据需求调整 */
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

#title {
  text-align: center;
  font-family: Playbill;
  font-weight: normal;
  font-size: 40px;
  /* 可根据背景色调加文本阴影提升可读性 */
  text-shadow: 0 0 4px #fff;
}

/* 补充文本样式可自定义 */
.desc {
  text-align: center;
  font-size: 20px;
}

<body>
  <h1 id="title">Путеводитель по городам</h1>
  <p class="desc">这是补充说明文本</p>
</body>

方案2：保留img标签，用定位叠加文本 #

如果必须保留img标签（比如需要图片参与文档流自适应），可以给父元素加相对定位，文本元素加绝对定位叠在上方。

/* 包裹img和文本的父容器 */
.bg_wrap {
  position: relative;
  max-width: 100%;
}

.bg_image {
  overflow: hidden;
  max-width: 100%;
  height: auto;
  display: block;
}

#title {
  position: absolute;
  /* 位置可自定义调整 */
  top: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: Playbill;
  font-weight: normal;
  font-size: 40px;
  margin: 0;
  text-shadow: 0 0 4px #fff;
}

.desc {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 20px;
}

<body>
  <div class="bg_wrap">
    <h1 id="title">Путеводитель по городам</h1>
    <p class="desc">这是补充说明文本</p>
    <img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
  </div>
</body>

如果文本清晰度不足，可以根据背景图色调给文本加半透明背景衬层，进一步提升可读性

内容的提问来源于stack exchange，提问作者Виктория Мот