0

午後、そして皆さんが素晴らしいクリスマスを過ごせたことを願っています。

HTTP リクエストをできるだけ減らすという目標を持って、背景に使用されるすべてのパターンでスプライトを作成したいと考えています。サイト用にすでに 2 つのスプライトを作成しましたが、すべて高さおよび/または幅に特定のサイズを使用しています

背景が X と Y の両方を繰り返すスプライトを使用したり、 width=100% を使用したりすることは可能ですか?

私はこれらのファイルを持っています:

blog.png (65px*65px)
contacts.png (67px*100px)
intro.png (50px*50px)
portfolio.png (80px*80px)

そして、それぞれに次のような CSS があります。

#intro{width:100%;background:url(../img/pat/intro.png) repeat}
#portfolio{width:100%;background:url(../img/pat/portfolio.png) repeat;padding-bottom:30px}
#contact{background:url(../img/pat/contacto.png) repeat;padding-bottom:50px}
4

4 に答える 4

2

スプライトとリピートは実際には組み合わされません。トリックがありますが、-moz-image-rectGeckoのみのようです。

もちろん、複数のY繰り返し画像を並べたり、複数のX繰り返し画像を重ねたりすることもできます。ただし、X方向とY方向の両方で繰り返したい場合は、単一の画像である必要があります。

于 2012-12-26T16:19:21.533 に答える
1

このようにすることはできないと思います。

于 2012-12-26T16:18:35.760 に答える
1

CSS2スプライトは、幅/高さを指定した繰り返しのないパターンにスプライトを使用するように制限されているため、適用が困難です。インスタンスの場合、固定の幅/高さの画像ロールオーバーにcssスプライトを使用し、画像の高さが10background-position: 0 -10px;ピクセルで、画像を垂直に積み重ねて作成したcssスプライトを呼び出すだけです。

CSS3は、バックグラウンドクロップやその他の革新的な方法を実行できるようにすることで、より優れた制御を提供します。私はもっ​​と学ぶためにグーグル検索をするでしょう。

それが私次第だとしたら、私はそのような小さなコスト削減戦術にそれほど多くの時間を費やすことはないでしょう。HTTP呼び出しと帯域幅は、これまでになく安価で低コストです。HTMLの圧縮、バックエンドでのボトルネックの削減、およびキャッシュの利用や画像の保存に時間を費やす方がよいでしょう。

于 2012-12-26T16:18:48.877 に答える
0

繰り返しの方法に応じて4種類のCSS背景画像があり、そのうち3つをCSSスプライトに組み合わせることができ、3つの異なるスプライトがあります（30枚の画像よりもパフォーマンスが優れています）。

  • no-repeat1スプライトの背景、
  • repeat-x2番目のスプライトの背景、
  • repeat-y3番目のスプライトの背景、
  • 繰り返しの背景はそのままにしておく必要があります

さまざまなサイズの背景があります。たとえば、repeat-x背景の幅は32、33、50、80ピクセルです。私が与えられたアドバイスは、最大のものを選び、このサイズ（ここでは80px）のストライプでスプライトを作ることでした。次に、個々の画像の正確な幅に関係なく、、、などを適用するだけで済みますbackground-position。32pxの画像を33pxの1つに置き換える場合、次のすべての画像を置き換えて、Photoshopのすべてのレイヤーを1pxで慎重に変換する必要はありません。 すべての幅が最大33pxで、80pxの1つを除く場合、セキュリティで40pxのストライプを作成し、最後に1つ配置して、特定のケースにすることができます。0-80px-160pxbackground-position
80px

スプライトとは関係なく、新しいbackground-*プロパティについても読むことができます（としてbackground-size: cover）：

于 2012-12-26T16:58:12.287 に答える