Question

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

我想在这里尝试完成的是在页面的一侧设置阴影效果。与http://www.adobe.com/网站类似。你会看到两边都有阴影边框。

Answer 1

你的左右div没有高度。

请参阅this更新的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;和高度）的修复：

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

Demo

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来做这些事情。

css垂直重复背景

6 个答案: