Html 仅在一个网页上更改背景_Html_Css

Html 仅在一个网页上更改背景

html css

Html 仅在一个网页上更改背景,html,css,Html,Css,因此，我有下面的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; } 我的问题

因此，我有下面的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，在我的其余页面上有另一个背景图像吗？

将

内部样式添加到索引页面，如下所示
<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>


正文{
背景：url（../index/images/white.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

CSS文件的正文将应用于所有其他页面。
将内部样式添加到索引页面，如下所示
<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>


正文{
背景：url（../index/images/white.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

CSS文件的正文将应用于所有其他页面。
仅将类添加到该站点的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;
   }


html.home-page{
背景：url（../index/images/white.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
仅将您的类添加到该站点的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;
   }


html.home-page{
背景：url（../index/images/white.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
您可以使用类，而不是直接使用html选择器：
.blue
{
    background: blue;
}

那么就这样称呼它：
<html class="blue">

您可以使用类，而不是直接使用html选择器：
.blue
{
    background: blue;
}

那么就这样称呼它：
<html class="blue">

您可以通过多种方式来实现这一点，一个简单的方法是将类赋予根元素并适当地设置样式。仅供参考，我将使用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>

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


...

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

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


...
您可以通过多种方式来实现这一点，一个简单的方法是将类赋予根元素并适当地设置样式。仅供参考，我将使用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>

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


...

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

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


...
我也更喜欢body，特别是因为Modernizer在html标记上使用class。我也更喜欢body，特别是因为Modernizer在html标记上使用class。