每个页面的背景不同？答案

【问题标题】：Different background for each page?每个页面的背景不同？
【发布时间】：2013-05-20 09:51:45
【问题描述】：

我正在尝试找到最简单的方法来为我网站中的每个页面（来自我的 NavBar）提供一个“不同”的照片背景。似乎一旦选择了背景，它对于所有后续页面都保持不变。

我的导航栏中有“主页”、“关于”和“联系我”链接。我的目标是当访问者点击我的主页时有一个照片背景，当他们点击关于页面时有另一个照片背景，当他们点击我的联系页面时有第三个照片背景，等等。

有没有简单的方法可以做到这一点？

到目前为止，这是我的代码：

<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

我的 CSS 如下所示：

body {background-image:url(greentea.jpg);}

【问题讨论】：

标签： html css

【解决方案1】：

您可以像这样将类分配给正文

首页

<body class="home">

关于我们的页面

<body class="about">

你可以使用css

body.home{background-image:url(greentea.jpg);}
body.about{background-image:url(greentea.jpg);}

【讨论】：

我选择ID，因为你不会有另一个关于页面或另一个主页。只有一个。类名更适合
你可以选择任何一种方式，但有时你可能需要一些 javascript 废话的 body id，所以最好保持安全。
具体是什么JS？ document.body 为您提供正文。
我们在我们的网站recognizeapp.com、home.scss 上进行CSS 作用域的方式是#home {/*所有主页范围的css 都放在这里*/}，等等所有页面。保持隔离。
正如我所说，我们可以选择任何一种方式

【解决方案2】：

为每个标签指定一个唯一的页面 ID。在我们的应用中，我们使用 ruby on rails，所以它是 id="" 类型的架构。

如果您的网站是静态的，只需在 ID 中进行硬编码。

<body id="about">

然后在 CSS 中

body#about {background...}

【讨论】：

【解决方案3】：

我选择这样做的方式是根据当前页面在<body> 元素上分配不同的类。

这样，您可以使用 CSS 以页面特定资产（例如可维护方式的背景）定位每个页面。

大多数 CMS 是否可以只使用页面的 id（无论是 slug、节点 id 还是经过清理的路径）。

【讨论】：

我认为这可能有效。因此，如果我在每个页面（主页、关于、联系人）的元素上分配不同的类，那么我可以将所有这些类添加到我的样式表中，它应该可以正常工作。我说的对吗？
您只需添加类似body.page1 { /* Styles here */ } 的内容，或者您可以定位后代，例如body.page1 .someclass

【解决方案4】：

在每个页面的<head><style></style></head> 标记中使用您已经拥有的CSS 行(body {background-image:url(greentea.jpg);})，并且只需更改每个页面上的背景图像。请注意，建议使用单独的 CSS 文件以避免任何内联样式。

【讨论】：