html - 多个背景相互叠加(正常、拉伸(stretch)、正常)

Question

自从我 faced an issue由于背景图片对于不同分辨率的内容来说太短，我尝试将背景分成 3 部分并自动拉伸(stretch)中间部分以相应地填充顶部和底部图像之间的空间。不幸的是我没能在 CSS 中实现这一点。具体怎么做？

content_background_top.png:1024 x 68px
content_background_middle.png:1024 x 6px(拉伸(stretch))
content_background_bottom.png:1024 x 71px

像这样:

#content{
    width: 1024px;
    height: 950px;
    text-align: center;
    padding: 35px 0 35px 0;
    background: url(img/content_background_top.png), url(img/content_background_middle.png), url(img/content_background_bottom.png);
    background-repeat: no-repeat;
    background-size: 1024px 68px, 1024px auto, 1024px 71px;
}

Answer 1

您需要指定背景位置和背景尺寸。另请注意，您需要在最后列出较大的“中间”背景，以免覆盖其他背景。

#content {
  width: 1024px;
  height: 950px;
  text-align: center;
  padding-top: 35px;
  background: url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1), url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1), url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1);
  background-repeat: no-repeat;
  background-position: 0% 0%, 0% 100%, 0% 50%;
  background-size: 100px, 100px, cover;
}

<div id="content"></div>