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用於此類情況。