1

所以我有以下css代码将背景图片设置为我所有的网页

  html { 
   background: url(../index/images/white.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   }

我的问题是我可以在一个页面上有一个背景图片让我说 index.html 和我的其余页面的另一个背景图片吗？

4

4 回答 4

4

您可以通过多种方式做到这一点，一种简单的方法是将类赋予根元素和适当的样式。仅供参考，我会用它body代替html背景。

CSS

body { 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body.home {
    background: url(../index/images/white.jpg) no-repeat center center fixed; 
}
body.product-list {
    background: url(../index/images/another-image.jpg) no-repeat center center fixed; 
}

索引.htm

<body class="home">
    ...
</body>

产品列表.htm

<body class="product-list">
    ...
</body>
于 2013-03-29T05:55:47.290 回答
1

您可以使用类而不是直接使用 html 选择器：

.blue
{
    background: blue;
}

然后这样称呼它：

<html class="blue">
于 2013-03-29T05:54:55.897 回答
0

添加internal style到索引页面，如下所示

<style>
 body { 
   background: url(../index/images/white.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   }
</style>

CSS 文件的正文将适用于所有其他页面。

于 2013-03-29T05:54:02.103 回答
0

仅将您的类添加到该站点的 index.html 文件中。

<html class="home-page">

html.home-page { 
   background: url(../index/images/white.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   }
于 2013-03-29T05:54:16.707 回答