Question

我有一个包含大约7个不同页面的网站。我想要两个不同的背景图像，一个用于主页，另一个用于显示在每个其他页面上。这需要Javascript / Jquery还是简单的css？

如下所示，我将我的身体设置为在其他六个页面上显示背景图像。然后尝试直接在我的HTML索引页面中使用css并显示不同的背景但它失败了。

body {
font-family: Helvetica, Arial, sans-serif;  
background: url(images/hso-palmtree-background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

您可以在每个页面上为您的身体标记指定特定的类。

在家里说：

  <body class="home">

并在每页上

 <body class="page-1">
 <body class="page-2">
 ....

然后你的css可以分成几个与每个身体类匹配的规则，专业化

/* common body css */
body {
font-family: Helvetica, Arial, sans-serif;  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} 

/* specialized body for home */
body.home {
   background: url(images/hso-palmtree-background.jpg) no-repeat center center fixed; 
}

/* specialized body rules for page 1 */
body.page-1 {
   background: url(images/background-for-page-1.jpg) no-repeat center center fixed; 
}

依旧......

Answer 2

有很多方法

让每个人都有一个id或类

或将背景添加为html <style>background :imgurl</style>

主页背景图像与其他页面不同

2 个答案: