Question

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

我的NavBar中有Home，About和Contact me链接。 我的目标是当访问者点击我的主页时有一个照片背景，当他们点击关于页面时有另一个照片背景，当他们点击我的联系页面时有第三个照片背景等 < / p>

有一种简单的方法吗？

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

<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);}

Answer 1

您可以将课程分配给身体，如

主页

<body class="home">

关于我们页面

<body class="about">

你可以使用css

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

Answer 2

为每个标记指定唯一的页面ID。在我们的应用程序中，我们在rails上使用ruby，因此它是id =“＆lt;％= controller-view％＆gt;”一种建筑。

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

<body id="about">

然后在CSS中

body#about {background...}

Answer 3

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

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

大多数CMS都可以使用页面的id（无论是slug，节点ID，还是清理路径）。

Answer 4

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