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。

我认为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");
}

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

1 个答案: