1

複数の背景画像を使用して、液体幅の div でこの結果を取得しようとしています。

ここに画像の説明を入力

画像を 3 つの部分に分割しました。

ここに画像の説明を入力

そして、次のようにdivのスタイルを設定しようとしています:

        height: 14px;
        background-image: url(static/img/workspace-pre-hr-l.gif), 
            url(static/img/workspace-pre-hr-bg.gif),
            url(static/img/workspace-pre-hr-r.gif);
        background-repeat: no-repeat, repeat-x, no-repeat;
        background-position: left, center, right;

しかし、右マージンが機能しないため、代わりにこれを使用しています:

http://i.imgur.com/GSxuH.gif

何か助けはありますか？ありがとう

編集 フィドル！http://jsfiddle.net/J5Tsa/

解決済み 画像間の z- index 問題のようです。繰り返される前に右マージンを宣言すると、問題が解決しました。

4

3 に答える 3

2

プロパティで指定された順序で画像がスタックされることを理解していbackground-imageます。だから私の理論はそれworkspace-pre-hr-r.gifが下に表示されているということですworkspace-pre-hr-bg.gif。

これを試して...

background-image: url(static/img/workspace-pre-hr-l.gif), 
  url(static/img/workspace-pre-hr-r.gif),
  url(static/img/workspace-pre-hr-bg.gif);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left, right, center;
于 2012-10-22T16:28:58.427 に答える
1

CSS 3 はborder-image、以前のバージョンの CSS およびユーザー エージェントとの互換性を放棄しても構わないと思っている場合に、目的を達成するルールをサポートします。構文はよりスリムで読みやすくなっています。

<div style="border-width: 25px; border-image: url(http://codebrief.com/old/uploads/2011/11/aqua_bg.png) 25 25 25 25 repeat; background-color: #00e0a0; background-clip: padding-box;">Hello World!</div>​

http://jsfiddle.net/Wnq3z/に書いて保存しました

CSS 3に存在することについて何か読んだことを思い出した後、私は単純にGoogleで検索して解決策を見つけました。

于 2012-10-22T15:59:52.080 に答える
0

フィドルを待っているので、中央の画像のみを使用して、境界線を次のように切り上げることをお勧めします。

border-radius: 10px 10px 0px 0px;

編集: 注意として、border-radius は引き戸技術をバイパスするために生まれています...

于 2012-10-22T15:20:38.140 に答える