Question

所以我有以下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和另一个背景图像吗？

Answer 1

你可以通过多种方式做到这一点，一个简单的方法是给一个根元素和一个类适当的类。仅供参考我使用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; 
}

<强>的index.htm

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

<强> productList.htm

<body class="product-list">
    ...
</body>

Answer 2

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

.blue
{
    background: blue;
}

然后这样称呼它：

<html class="blue">

Answer 3

将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文件的正文将适用于所有其他页面。

Answer 4

仅将您的类添加到该站点的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;
   }

仅在一个网页上更改背景

4 个答案: