Question

我希望为不同的子页面提供不同的背景图像（例如＆＃34;菜单＆＃34;图像＃1，＆＃34;联系我们＆＃34;图像＃2等。）

我有以下css代码：

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

}

但是这会将一个图像设置到每个子页面。现在我可以让每个子页面在html中有一个不同的div（例如div id =＆＃34; menubg＆＃34 ;; div id =＆＃34; contactusbg＆＃34;）并为每个子页面添加上面的CSS（略有变化） div，但后来我创造了大量不必要的CSS项目。

那么，有更好的方法吗？

我应该直接将背景图片放入HTML中并为该图像添加一个css吗？是否可以保存所有CSS属性，如＆＃34; cover＆＃34;？（理想情况下，我想在每个HTML中都有一个代码用于所有子页面的一个CSS，我可以这样做吗？）
使用JavaScript（或其他）是好/更好的灵魂？
制作多个CSS样式是唯一的解决方案吗？

谢谢！

Answer 1

我通常这样做的方法是给body背景，而不是html。您需要为您的正文指定其所在页面的ID名称。

首先，您要覆盖所有身体元素，并将所有额外的background信息放入自己的行中：

body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
}

然后，如果您想要menu上的img1和contact us上的img2，请提供您的body和ID中的一个：

<body id="menu">

然后在你的CSS中，你只需在background-image属性中写一下：

body#menu {
    background-image: url(images/bg1.jpg);
}

和您的联系我们页面一样：

<body id="contact-us">

-

body#contact-us {
    background-image: url(images/bg2.jpg) no-repeat center center fixed;
}

所以你的CSS文件看起来像这样：

body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
}
body#menu {
    background-image: url(images/bg1.jpg);
}
body#contact-us {
    background-image: url(images/bg2.jpg);
}

制作多个背景图片的最佳方法？

1 个答案: