如何在HTML中调用图片URL而非CSS？满足CMS可修改图片需求

API 探路者

2026-5-28

解决方案：HTML调用背景图 + 适配Stack Overflow代码运行

嘿，我来帮你搞定这两个问题！咱们一步步来：

1. 实现从HTML中调用图片URL

原来的CSS背景图方案没法让CMS直接修改图片地址，咱们换成<img>标签嵌入图片，再搭配一个渐变叠加层实现原有的视觉效果——这样CMS只需要修改<img>的src属性就能替换图片啦。

核心思路：

用容器包裹图片和渐变层，保证层级关系
图片设置为铺满容器，用object-fit维持比例不变形
渐变层绝对定位在图片上方，实现半透明色彩叠加

2. 解决Stack Overflow代码不生效的问题

你的原代码用了SCSS的嵌套语法（比如&:before），但Stack Overflow的代码块默认解析普通CSS，所以得把SCSS转成标准CSS写法，去掉嵌套结构。

完整可运行代码

HTML

<div class="bg-container">
  <img src="http://unsplash.it/1200x800" alt="页面头部背景图" class="bg-img">
  <div class="bg-overlay"></div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现滚动条 */
}

.bg-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止图片溢出容器 */
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片铺满容器，同时保持比例 */
  object-position: center center; /* 图片居中显示 */
}

.bg-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
  opacity: .6;
}