css - 自定义背景图片

Question

如何在 css 中创建这样的背景（中间和最后一个块具有流体高度）：

有什么好的教程吗？

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;
}

Answer 2

你可以这样写：

#top,#bottom
{
    height: 110px; // Make this the height of the background image in pixels
    background: url('BG.jpg') repeat-x left top;
}


#bottom
{
    background-position:left bottom;
}