应使用 background-clip: content-box 并配合 background-origin: content-box，使背景（色/图）仅在内容区显示且定位原点为内容区左上角，避免 padding 和 border 影响。
要让图片背景只显示在元素的内容区域（content box），而不是默认的整个盒模型区域（包括 padding 和 border），需使用 background-clip 属性，并将其设为 content-box。
设置背景仅在内容区显示
默认情况下，背景（包括背景色和背景图）会绘制到 border-box 区域，也就是包含边框以内的全部区域。若希望背景图严格限制在内容区域（即 padding 和 border 不覆盖背景，且背景不延伸进 padding 区），应明确设置：
background-clip: content-box;- 同时建议配合
background-origin: content-box;，确保背景图的定位原点也在内容区左上角（否则即使裁剪了，定位仍可能基于 padding-box）
完整常用写法示例
以下 CSS 可确保背景图只出现在内容区域内，且不被 padding 或 border 遮挡或影响定位：
pre {background-image: url("bg.png");
background-repeat: no-repeat;
background-position: center;
background-clip: content-box;
background-origin: content-box;
padding: 20px;
border: 5px solid #333;
}
注意几个关键点
-
background-clip控制“绘制范围”，background-origin控制“定位起点”，二者常一起设置才符合预期 - 若只设
content-box但未设background-origin，背景图可能从 padding-box 左上角开始定位，导致视觉上偏移 - 该设置对
background-color同样生效——颜色也会被裁剪到内容区 - 需确保元素有明确宽高或内容撑开，否则内容区可能为 0，背景不可见
对比其他取值
便于理解：
• border-box：背景延伸至边框外沿（默认）
• padding-box：背景延伸至内边距外沿（不包含 border）
• content-box：背景只在内容区绘制（不含 padding 和 border）
