如何仅在着陆页上显示正文背景图片

Question

我已经为我的网站创建了第二个页面，而我的第一个页面只是一个带有背景图片的登录页面。但是，当我进入我创建的第二个页面时，我在登录页面上使用的背景图片也显示在我不想要的那个页面上。

这是我的 CSS 代码：

body {
background: url(https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80);
background-size: cover;
background-position: center;
font-family: 'Lato';
color: white;
}

注意：我也试过 background-repeat: no-repeat; 但没用。

Answer 1

您需要为您的背景创建一个单独的 div class，因为您的所有页面都会始终调用 body 标记。使用类似这样的东西，尝试只在所有页面上将你想要的东西分配给正文。

<div class="background">

....

然后将您的 CSS 添加到此 class

//CSS file 
.background {
background: url(https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80);
background-size: cover;
background-position: center;
}

希望对您有所帮助。

Answer 2

将 class 应用于目标网页的 body 元素，并将 CSS 规则和 selector/s 更改为仅 select body那个特别的 class.

HTML 的着陆页将是

<body class="mylandingpage">
   ....

对于其他页面：<body> 没有一个class（或另一个class）

和 CSS:

body {
 background: none;
 font-family: 'Lato';
 color: white;
}

body.mylandingpage {
 background: url(https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80);
 background-size: cover;
 background-position: center;
}

（color 也可能特定于着陆页，我不知道...）

如何仅在着陆页上显示正文背景图片

how to have body background image only on landing page

css

background-image

css-selectors