Question

是否可以使用不同的多体背景但仅使用1张图片，具体取决于访问的html文件？

为了澄清我有1个外部样式表但我有3个html文件，每个访问外部样式表我想要做的是每个html文件有3个不同的身体背景图像。这样做的正确方法是什么？

body {
background-image: url("backGroundImage1.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }

Answer 1

使用Id或class将是实现您所需目标的最佳方式。

您需要将以下CSS添加到主样式表文件中，并根据您的要求和页面，您可以使用<body>或ID's将其添加到Classes。

例如，使用ID

body#One {
background-image: url("backGroundImage1.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }

body#two {
background-image: url("backGroundImage2.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }

body#three {
background-image: url("backGroundImage3.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }

HTML：

<body id="One">...</body>或 <body id="two">...</body>或 <body id="three">...</body>用于您的网页。

例如，使用Class

body.One {
background-image: url("backGroundImage1.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }

body.two {
background-image: url("backGroundImage2.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }

body.three {
background-image: url("backGroundImage3.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }

HTML：

<body class="One">...</body>或 <body class="two">...</body>或 <body class="three">...</body>用于您的网页。

您可以根据自己的要求在这些页面上插入它们。

希望这有帮助。

Answer 2

希望有所帮助

/* For all pages */
body {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/*first page*/
body.first {
    background-image: url("backGroundImage1.jpg");
}
/*second page*/
body.second {
    background-image: url("backGroundImage2.jpg");
}
/*third page*/
body.third {
    background-image: url("backGroundImage3.jpg");
}

具有多个链接html的外部样式表

2 个答案: