不修改CSS实现PHP动态页面Div背景图替换方案求助

我有一个页面，支持用户上传图片和标题并提交表单，通过PHP脚本生成新页面来替换示例中的标题等内容。需要将用户上传的图片设为页面中.hero-image div的背景图，且希望复用原有CSS（生成新CSS成本过高）。但页面无固定名称，无法通过CSS针对性处理；尝试过在HTML末尾用JS、头部加style标签设置背景图，均无效。

尝试的代码 #

HTML #

<body style="background-color:darkgrey">
  <div class="hero" id="top">
    <div class="hero-image" id="chg-bg"></div>
    <h1>Do more, with less.</h1>
  </div>
  <section id="vision">
    <div class="content">
      <h1>We Have a Vision</h1>
      <h2>For a world where users come first</h2>
      <p>Latte ideate unicorn food-truck hacker latte disrupt integrate user story latte. Innovate viral food-truck paradigm user story food-truck quantitative vs. qualitative responsive intuitive parallax. Disrupt engaging bootstrapping iterate pivot fund
        venture capita</p>
      <p>Bootstrapping ship it pair programming waterfall is so 2000 and late food-truck long shadow venture capital ship it moleskine sticky not</p>
    </div>
  </section>
</body>

CSS #

.hero-image {
  top: -20rem;
  bottom: -20rem;
  width: 100%;
  min-height: 100px;
  background-image: url(http://www.howlatthemoon.com/wp-content/uploads/2015/09/nyc-skyline.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: absolute;
  z-index: 1;
}

.hero h1 {
  position: relative;
  text-align: center;
  color: white;
  padding-top: 20rem;
  z-index: 2;
}

/* Default header styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 300;
  color: #222222;
  line-height: 1.4;
}

h1 {
  font-size: 2.75rem;
}

h2 {
  font-size: 1.6875rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

/* Base element styles */
body,
html {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #222222;
}

a,
a:hover {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 2rem 0;
  list-style: disc;
  padding-left: 2rem;
}

ul li {
  padding: 0.5rem 0;
}

p {
  margin: 1rem 0;
  line-height: 1.8;
}

.content {
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}

.hero {
  position: relative;
  overflow: hidden;
  height: 30rem;
}

section {
  padding: 6rem 0 3rem;
}

尝试的JS #

var el = document.getElementById('chg-bg');
el.style.backgroundImage = "url(https://via.placeholder.com/800/ff0000)";

简单可行的解决方案 #

方案1：PHP直接注入行内样式（推荐，无依赖） #

生成页面时，PHP直接为#chg-bg元素添加行内style属性，行内样式优先级高于CSS类，可直接覆盖原有背景图，完全复用现有CSS：

<div class="hero-image" id="chg-bg" style="background-image: url('<?php echo $user_uploaded_image_url; ?>');"></div>

这里$user_uploaded_image_url是PHP中存储的用户上传图片的路径/URL，无需额外JS或修改CSS。

方案2：修复JS加载顺序问题 #

如果必须使用JS，确保代码在DOM完全加载后执行，避免因元素未渲染导致无法获取：

• 将JS代码放到</body>标签的最后（确保DOM已加载）：

<!-- 页面其他内容 -->
<script>
var el = document.getElementById('chg-bg');
el.style.backgroundImage = "url('<?php echo $user_uploaded_image_url; ?>')";
</script>
</body>

• 或者用DOM加载事件包裹代码，兼容任意位置：

document.addEventListener('DOMContentLoaded', function() {
  var el = document.getElementById('chg-bg');
  el.style.backgroundImage = "url('<?php echo $user_uploaded_image_url; ?>')";
});

内容的提问来源于stack exchange，提问作者Célian CREPIN