[分享]css两张上下背景

CSS可以使用背景图片来装饰网页元素，其实这也是网页设计中非常常见的一种手段。这里我们介绍一种通过两张上下背景来实现网页美化的方式，不仅简单易用，而且效果很棒。body { background: u...

CSS可以使用背景图片来装饰网页元素，其实这也是网页设计中非常常见的一种手段。这里我们介绍一种通过两张上下背景来实现网页美化的方式，不仅简单易用，而且效果很棒。

body {
  background: url(bg_top.jpg) top center no-repeat, url(bg_bottom.jpg) bottom center no-repeat;
} 

如上所述，我们使用了两张背景图片，分别命名为bg_top.jpg和bg_bottom.jpg。然后我们通过在body元素中设置background属性来分别加载这两张背景图片。具体来说：

• 第一张背景图片是bg_top.jpg，它被设置在页面的顶部中心位置，不重复；
• 第二张背景图片是bg_bottom.jpg，它被设置在页面的底部中心位置，不重复。

这样，我们就实现了两张上下背景的效果。

需要注意的是，浏览器会先加载背景图片然后再渲染页面，所以一定要确保背景图片文件大小适中，否则很容易导致页面加载缓慢。此外，还需要考虑背景图片文件的格式，常见的有JPG、PNG等，需要根据具体情况来选择。

最后，我们可以进一步优化这个效果，比如给字体、链接等元素也设置辅助的背景图片，这样可以使页面更加统一扁平化，增强整体视觉效果。当然，具体实现和效果还需要不断尝试。