css - 自定义背景图片

Question

如何在 css 中创建这样的背景(中间和最后一个 block 具有流体高度):

有什么好的教程吗？

Answer 1

您可以制作顶部和底部的 div 元素并按如下方式设置它们的 CSS:

#topBGDiv 
{
    width: 100%;
    height: 125px; // Make this the height of the background image in pixels
    background-image: url('dark-gray-ribbon.jpg');
    background-repeat: repeat-x;
    overflow: hidden;
}


#bottomBGDiv 
{
    width: 100%;
    height: 110px; // Make this the height of the background image in pixels
    background-image: url('light-gray-ribbon.jpg');
    background-repeat: repeat-x;
    overflow: hidden;
}

使用像这样的图像作为顶部的背景图像:

底部是这样的:

最后，将页面背景色的 CSS 设置为中间色。所以，像这样:

body
{
    background-color: #C0C0C0;
}