css - 分离体

Question

我有数百个 div，每个 div 都有自己的样式属性。就在几分钟前，我发现我必须改变很多东西来改变页面的一些背景。我想要 body 的背景，从 0px 到 200px，有黑色背景， body 的背景从 200px 到 500px 有灰色背景，从 500px 到 700px 再次有黑色背景。最后，700px 到 ...px 应该有白色背景。准确地说，

body
{
background-color:#ADADAD;
}

使整个页面，包括页面底部(我希望它是白色的)变成灰色。有没有办法把正文 px 和 px 分开？

Answer 1

正如 Daniel 所指出的，最好的方法(我确信您正在尝试避免添加甚至更多 div)是创建一个高度为 1 像素、宽度为 700 像素的图片。使用以下样式在背景上实现图像:

body{background: url(your-image-here.jpg) repeat-y;}

这将垂直重复您的图像，重新创建分色，而无需创建更多 div。

编辑:正如您提到的，根据类别，您可以在 css 文件中的 body 标签上实现一个独特的类。在这种情况下，对于每个不同的类别，您可以加载不同的图像。由于图像非常小(最多几 kB)，因此为每个类别下载图像对服务器或用户来说不会很重。 (这比尝试拉伸(stretch)图像以适合您需要的尺寸要好)。