javascript - 如何使用相同的 CSS 代码为一个 id/class 实现多个背景图像？

Question

所以我的网站有一个横幅 ID，我的其中一个页面是这样的

#photo-banner {
    background-attachment: scroll, fixed;
    background-color: #645862;
    background-image: url("images/overlay.png"), url("../images/banner3.jpg");
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    color: white;
    padding: 7em 4.5em 3em 4.5em;
    text-align: center;
}

HTML 中元素的 id 属性。

但是，这仅适用于一页。如果我想用相同的其他设置制作另一个具有不同背景图像的页面，据我所知，我需要为此制作另一个 id。

我认为 JS/jQuery 有一种方法可以更改 HTML 文件而不是 CSS 文件中的背景图像，以节省大量代码编写。

或者如果有其他更好的方法，我也将不胜感激，谢谢!

Answer 1

在第二页上，为该元素指定一个类，并使用它来覆盖您当前的 CSS。您的所有其余 CSS 都可以保持不变并将被重新使用:

#photo-banner { /* this will apply to page 1 and page 2 */
    background-attachment: scroll, fixed;
    background-color: #645862;
    background-image: url("images/overlay.png"), url("../images/banner3.jpg");
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    color: white;
    padding: 7em 4.5em 3em 4.5em;
    text-align: center;
}

#photo-banner.page-two { /* this will apply to page two only */
   background-image: url(some-other-image.png), url(some-other-image.png");
}