2

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

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

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

4

6 回答 6

1

您的左右 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;和高度）的修复：

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;
}
于 2012-10-04T10:51:54.897 回答
1

写成——

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

演示

于 2012-10-04T10:52:06.393 回答
1

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

here is the demo http://jsfiddle.net/Sw6wB/13/

于 2012-10-04T11:07:35.140 回答
1

Depending on this tag, the image might repeat in horizontal or vertical or both directions.

It takes any of the following values:

  • repeat : This value tells the image to be repeated in both directions

  • repeat-x : This value tells the image to be repeated in vertical direction only

  • repeat-y : This value tells the image to be repeated in horizontal directions

  • no-repeat : This value tells that the background image should not be repeated

For example: repeat-x will work for repeating a vertical background.

于 2012-10-04T11:46:48.307 回答
0

采用：

background-repeat: repeat-y;
于 2012-10-04T10:50:20.413 回答
0

要垂直重复背景，您可以使用background-repeat: repeat-y;但您的 CSS 不适合在小提琴中显示。

I 'll suggest to use box-shadow for such things.

于 2012-10-04T10:55:56.773 回答