2

<div> これが私のコードです。背景画像を垂直方向に繰り返す方法がわかりません。

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

ここで達成しようとしているのは、ページの側面に影の効果を置くことです。http://www.adobe.com/ Web サイトと同様です。両側に影の境界線が表示されます。

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

このタグに応じて、画像は水平または垂直、または両方向に繰り返される場合があります。

次のいずれかの値を取ります。

  • repeat: この値は、イメージが両方向に繰り返されることを示します。

  • repeat-x: この値は、イメージが垂直方向にのみ繰り返されることを示します。

  • repeat-y: この値は、イメージが水平方向に繰り返されることを示します。

  • no-repeat: この値は、背景画像を繰り返さないことを示します

例: repeat-x垂直の背景を繰り返す場合に機能します。

于 2012-10-04T11:46:48.307 に答える
1

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

ここにデモがありますhttp://jsfiddle.net/Sw6wB/13/

于 2012-10-04T11:07:35.140 に答える
0

使用する：

background-repeat: repeat-y;
于 2012-10-04T10:50:20.413 に答える
0

背景を垂直に繰り返すには、使用できますがbackground-repeat: repeat-y;、CSS はそれをフィドルで表示するには適していません。

そのようなものにはbox-shadowを使用することをお勧めします。

于 2012-10-04T10:55:56.773 に答える