CSS垂直重复背景

Question

我似乎无法弄清楚如何在<div>上垂直重复背景图像，这是我的代码。

http://jsfiddle.net/pedenski/Sw6wB/

我要在这里完成的工作是在页面的侧面放置阴影效果。 与http://www.adobe.com/网站类似。 您会在两侧看到阴影边框。

Answer 1

您的左div和右div都没有高度。

请参阅此更新的JS小提琴。

我添加了height:100px; 只是为了证明它有效

div#right {
    background-image:url(http://i45.tinypic.com/ejv8uq.png);
    background-repeat: repeat-y;
    width:100px;
    height:100px;
    float:right;
}

这是修复左块的问题（ background-position:top right; and height）：

div#left {
    background-image:url(http://i47.tinypic.com/2hsc187.png);
    width:100px;
    height:100px;
    float:left;
    background-repeat: repeat-y;
    background-position:top right;
}    

Answer 2

写为-

div#left {
    background:url(http://i47.tinypic.com/2hsc187.png) repeat-y left top;
    width:100px;
    float:left;
}

演示

Answer 3

使用background:url(http://i47.tinypic.com/2hsc187.png) right top repeat-y;

这是演示http://jsfiddle.net/Sw6wB/13/

Answer 4

取决于该标签，图像可能会在水平或垂直方向或两个方向上重复。

它采用以下任一值：

• repeat ：此值告诉图像在两个方向上重复

• repeat-x ：此值告诉图像仅在垂直方向上重复

• repeat-y ：此值指示图像在水平方向上重复

• no-repeat ：此值表明背景图像不应重复

例如： repeat-x将适用于重复垂直背景。

Answer 5

采用：

background-repeat: repeat-y;

Answer 6

要垂直重复背景，可以使用background-repeat: repeat-y; 但是您的CSS不能很好地显示出来。

我建议将box-shadow用于此类情况。