根據HTML更改Div的背景，無需修改CSS-有解無憂

我有一個頁面，用戶可以在其中發布帶有上傳圖片和標題的表單。

PHP 腳本將生成一個新頁面，將示例中的內容（如標題）替換為用戶輸入。

我想把上傳的圖片作為我頁面的背景。

我仍然想為每個頁面使用相同的 CSS，因為為每個頁面生成一個新的 CSS 太繁重了。

由于我的 HTML 頁面沒有固定名稱，我不能只在 CSS 中處理大小寫。

我嘗試在我的 html 頁面末尾使用一些 JS，但在這種情況下影像沒有出現。似乎某些屬性不適用于新背景，但我不確定。

我也嘗試在我的 HTML 頭部包含一個樣式元素，但與 JS 一樣，影像沒有出現。

我的頁面主要基于此代碼筆：https : //codepen.io/BarryKe/pen/advLWa 這是我的情況的自定義代碼筆： https ://codepen.io/Cryoclass/pen/LYrzGre

有人看到了如何做的（簡單的？）解決方案嗎？ 提前致謝！

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

.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;
}

<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>

uj5u.com熱心網友回復：

直接放樣式代碼不行嗎？

<div class="hero-image" style='background-image: url(https://placeholder.com/800) !important;'></div>

uj5u.com熱心網友回復：

我認為當您直接應用到您的 html 檔案時，您的 Js 和 Css 不顯示影像的問題可能是因為影像的相對路徑。嘗試使用完整路徑

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/535215.html

標籤：网页格式CSS

上一篇：如何將所有HTML元素的寬度設定為串列中最寬元素的寬度？

下一篇：blogerapi內容如何剁？