CSS文件中的每个页面都有自己的id

Question

我在一个网站上工作，并完成了首页，这是index.html和自定义其css为一个文件，作为一个模板，由所有页面来使用。

现在我有个问题了。

如何让所有页面显示它们自己的背景图像？

option1允许将background.img添加到其自己页面的html中。(1.img在1.html中，而不是在CSS文件中)

option2在css文件中(以某种方式)为每个页面赋予了自己的id。

option3另一种解决方案。

body{
    margin:0;
    padding:0;
    background-image: url(index.jpg);
    background-size: cover;
    background-attachment: fixed;


}
.topParagraph{
                
    font-size: 60px;
    font-weight: bold;
    text-align: center;
}
.topbar{

    text-align: right;
    
}

.content{
    background:whitesmoke;
    
    width: 50%;
    padding:10%;
    margin:200px auto;
    font-family: sans-serif;
    opacity: 0,5;
}
{

    padding: 0;
    margin: 0;
}
body
{

    background-image: url(deKlomp.jpg);
    background-size: cover;
    background-attachment: fixed;
    box-sizing: border-box;
    font-family: sans-serif;

}
.menu-bar
{

    background: #0b2463;
    text-align: center;
}
.menu-bar ul
{
    display: inline-flex;
    list-style: none;
    color:#fff
    
}
.menu-bar ul li
{
    widows: 120px;
    margin: 15px;
    padding: 12px;


}
.menu-bar ul li a
{
    text-decoration: none;
    color:#fff;

}
.active, .menu-bar ul li:hover
{
    background: #66c2ff;
    border-radius:3px;

}
.menu-bar .fa
{
    margin-right: 8px;
}
.sub-menu-1
{
    display:none;
}
.menu-bar ul li:hover .sub-menu-1
{
    display: block;
    position: absolute;
    background:  #66c2ff;
    margin-top: 15px;
    margin-left: -15px;

}
.menu-bar ul li:hover .sub-menu-1 ul
{
    display: block;
    margin: 10px;

}
.menu-bar ul li:hover .sub-menu-1 ul li
{
    width: 150px;
    padding: 10px;
    border-bottom: 1px dotted #fff;
    background: transparent;
    border-radius: 0px;
    text-align: left;


}
.menu-bar ul li:hover .sub-menu-1 ul li:last-child
{
    border-bottom: none;

}
.menu-bar ul li:hover .sub-menu-1 ul li a:hover
{
    color:  #66c2ff;
}

Answer 1

如果你不想改变.body类，你必须对特定的HTML文件使用不同的CSS文件。取而代之的是，获取另一个CSS class和html <div>，然后为其分配background-image: url(index.jpg);。

Answer 2

我所做的是从CSS文件中重新存储body类，并将其单独添加到html页面中。在那里，我将picture.img文件更改为我想要的文件。每个页面都有自己的页面！

这完美地解决了这个问题。