CSS文件中的每个页面都有自己的ID答案

【问题标题】：every page it's own id in CSS fileCSS文件中的每个页面都有自己的ID
【发布时间】：2020-09-12 00:44:49
【问题描述】：

我正在开发一个网站，并完成了首页 index.html 并将其 css 自定义为一个文件，以供所有页面用作模板。

现在我有一个问题。

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

option1 让 background.img 添加到自己页面的 html 中.. (1.img in 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;
}

【问题讨论】：

标签： html css layout

【解决方案1】：

如果您不想更改.body 类，则必须为特定的 HTML 文件使用不同的 CSS 文件。相反，取另一个 CSS class 和 html <div>，然后将 background-image: url(index.jpg); 分配给它。

【讨论】：

谢谢.. 不是我要更改 .body 类.. 我只是不知道该怎么做。
我会试试你的建议。当它成功时，我会留下最后的评论！

【解决方案2】：

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

结果完美。

【讨论】：