web-dev-qa-db-ja.com

CSS：画像の一部だけを繰り返して背景として使用することは可能ですか？

角の丸い長方形の画像があります。これを使用して、背景の上部と下部に使用します。

#content_top { /* 760px by 30px */
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 0 scroll;
    height: 10px;
}

#content_bottom { /* 760px by 30px */
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 -20px scroll;
    height: 10px;
}

次に、別の1pxの高さの画像を使用して垂直方向に繰り返し、このdivの背景の中間の領域を塗りつぶします。このような：

#content { /* 760px by 1px */
    background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll;
}

同じ画像（content_top_bottom.png）を使用して、その一部だけを使用して同じ効果を実現することは可能でしょうか？私はこのようなことを試しましたが、うまくいきませんでした：

#content { /* 760px by 1px */
    background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll;
}

httpリクエストの数を減らしたいので、同じ画像を使用したいと思います。 1pxの画像はおそらく大きな影響を与えることはないでしょうが、私はただ試してみたいと思います。誰でも助けることができますか？

htmlcssbackground
25
fei

上部、中央、下部を並べて、2280 x10の画像を作成します。次に、中央の部分を繰り返すことができます。

#content_top {
  background: #F7EECF url(images/content_bg.png) no-repeat 0 0 scroll;
  height: 10px;
}

#content {
  background: #F7EECF url(images/content_bg.png) repeat-y -760px 0 scroll;
}

#content_bottom {
  background: #F7EECF url(images/content_bg.png) no-repeat -1520px 0 scroll;
  height: 10px;
}
26
Guffa

サイト全体で3つの画像を使用することをお勧めします。

  1. 標準の非反復スプライト。これは、あなたの場合はcontent_top_bottom.pngになります（ただし、より一般的で他の部分に使用できるように、名前を変更する方がよい場合があります）。
  2. 「repeat-x」画像。これは、幅1px（またはデザインによってはもう少し）の画像になりますが、非常に高さが高くなります。これには、水平方向に繰り返されるすべての画像を配置します。
  3. 高さ1px、幅が非常に広いことを除けば、＃2と同様の「繰り返しy」画像。ここにcontent_body.png画像を配置します。

現在の場合、これにより2つのHTTPリクエストが発生しますが、3つ以上を使用しないため、はるかにスケーラブルです。残念ながら、両方向を並べて表示する背景では、個別である必要があります。

また、CSS3プロパティ border-image について読むこともできます。これにより、要素全体に1つの画像を使用できるようになります。まだ十分にサポートされていませんが、長すぎないことを願っています！

4
DisgruntledGoat