CSS：3x3 repeat-y 背景顶部和底部限制？答案

【问题标题】：CSS: 3x3 repeat-y Background top and bottom restrictions?CSS：3x3 repeat-y 背景顶部和底部限制？
【发布时间】：2013-01-06 22:06:08
【问题描述】：

我有以下问题：

我需要应用一个背景，上面有一个重复-y，以填充我的 div 垂直。现在我遇到了问题，它不应该从 top:0 填充，而是从顶部 85px 处填充，所以我需要类似

position:absolute;
top:85px;
bottom:85px;

用于在 css 中应用的背景。

我的问题的一些附加信息可以在这里找到：How to place a responsive background according to content height with HTML / CSS?

我怎样才能做到这一点？

我的结构如下：

<content><innercontent></innercontent></content>

content 是浏览器的整个宽度，innercontent 是固定宽度。

#content {
    background: 
    url("images/bg-top.png") no-repeat scroll center top, 
    url("images/bg-bottom.png") no-repeat scroll center bottom, 
    url("/images/bg-middle.png") repeat-y scroll center center transparent;
    position:relative;
}

有人可以帮助我吗？

【问题讨论】：

标签： html css background styles

【解决方案1】：

如果我理解正确，只需将其更改为：

#content {
    background: 
    url("images/bg-top.png") no-repeat scroll center top, 
    url("images/bg-bottom.png") no-repeat scroll center bottom, 
    url("/images/bg-middle.png") repeat-y scroll center 85px transparent;
    position:relative;
}

注意85px 代替center 作为背景位置y。

http://jsfiddle.net/ghKb2/1/

【讨论】：

这里没什么重要的

【解决方案2】：

终于找到了：

只需用这个创建一个 div：

#middle-stripe {
  background: url("/wp-content/themes/vitaphone/library/images/bg-middle.png") repeat-y scroll center center transparent;
   position: absolute;
   top:85px;
   bottom:85px;
   width:100%;
 }

【讨论】：