HTML/CSS新手求助：实现居中响应式带独立背景的文本框及顶部PNG边框

直接上代码，完全匹配你的需求，每一步都解决了你提到的问题：

<!-- HTML结构 -->
<div class="text-box">
  <h1>短标题</h1>
  <h3>2024-05-20 14:30</h3>
  <h2>这里是内容部分，可以写多行文本，会自动左对齐</h2>
</div>

/* CSS样式 */
/* 全局重置可选，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text-box {
  /* 居中容器：左右margin自动，max-width实现响应式 */
  max-width: 800px;
  width: 90%;
  margin: 2rem auto;
  
  /* 独立背景 */
  background-color: #f5f5f5;
  
  /* 文本左对齐，同时容器本身居中 */
  text-align: left;
  
  /* 内部留白，避免文本贴边框 */
  padding: 1.5rem;
  padding-top: 3rem; /* 留出顶部PNG边框的空间，数值等于PNG高度 */
  
  /* 顶部PNG边框：用背景图实现 */
  background-image: url('你的顶部边框文件路径.png');
  background-repeat: repeat-x; /* 水平重复铺满容器宽度 */
  background-position: top center; /* 顶部居中 */
  background-size: auto 2rem; /* 第二个值是PNG的高度，和padding-top对应 */
  
  /* 可选：给容器加个底部/侧边边框增强视觉 */
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

/* 可选：调整标题的间距，让排版更舒服 */
.text-box h1 {
  margin-bottom: 0.5rem;
}
.text-box h3 {
  margin-bottom: 1rem;
  color: #666;
  font-weight: normal;
}
.text-box h2 {
  line-height: 1.6;
  color: #333;
}

关键细节解释 #

• 居中+响应式：max-width:800px限制最大宽度，width:90%保证小屏幕下不会撑满屏幕，margin:0 auto实现水平居中。
• 文本左对齐：直接给容器设置text-align:left，内部所有标题都会继承这个属性，解决你之前文本不对齐的问题。
• 独立背景：background-color直接设置容器的背景色，和网站其他部分完全隔离。
• 顶部PNG边框：通过background-image加载PNG，repeat-x让它水平铺满容器顶部，padding-top留出足够空间避免文本覆盖图片，background-size的第二个值要和PNG的实际高度一致。
• 兼容小屏幕：因为用了百分比宽度和max-width，在手机、平板等设备上会自动适配，不会出现横向滚动条。

你之前的问题修复 #

• 之前文本未左对齐：大概率是你给父容器加了text-align:center，现在直接给文本框设置text-align:left就能纠正。
• 无独立背景：现在通过background-color给容器单独设置了背景，和页面其他区域区分开。

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