6

スプライトは、サイズが変わらない小さなアイコンには適していますが、ボタンや div の背景などには 1 ピクセル幅の背景スライスを多く使用する傾向があります。これらのスライスをスプライトに含める方法はありますか? そのためには、スプライトから小さな断片を取り出し、それを要素の背景全体に外挿し、本質的にスプライトから切り取って、それがスタンドアロンの背景画像であるかのように繰り返す方法が必要です。

4

3 に答える 3

1

グラデーションに1px幅の画像を使用しているようです。両方ではなく、一方向にのみ画像を繰り返したいと思います。その場合は、幅 1px の画像のスプライトを作成できます。コツは、画像を繰り返す方向に従ってスプライトをレイアウトすることです。また、それらを右または下に配置するかどうかにも注意してください。たとえば、グラデーションがコンテナーの下部に配置される場合は、そのグラデーションをスプライトの下部に配置する必要があります。すべての画像が水平方向に繰り返される場合、それらを 1 つのファイルに重ねて配置できます。グリッド線で並べるか、他の画像が表示されないように十分なスペースを残すために、画像間にある程度の透明度を持たせるのが好きです。

古い IE を除くほとんどのブラウザーでは、画像を使用せずに CSS を介してグラデーションを作成できます。古いバージョンの IE では、画像を使用する必要があります。

于 2013-02-16T03:20:27.743 に答える
1

私があなたを正しく理解していれば、ミリアムの答えが正解です。

ミリアムの答えについて、いくつかの例を挙げて詳しく説明します。

ボタンを使用するグラデーションの CSS スプライトを次に示します。

グラデーションの CSS スプライト

CSS の background-position を使用して、特定のボタンに使用する特定のグラデーションをターゲットにします。

ただし、画像を使用したグラデーションは時代遅れです。ほとんどのグラデーションでは、CSS と IE フィルターを使用するだけで同じ結果を得ることができます。非常に複雑なグラデーションでも CSS で作成できます (IE は標準の「1 色から 1 色へ」のグラデーションにフォールバックします。IE8 ユーザーに最新のブラウザーと同じビューを表示させたい場合は、イメージをフォールバックとして使用できます)。 .

これは、グラデーションを作成し、生成されたコードをコピーして貼り付けるだけの優れたツール (Photoshop のようなもの) です: http://www.colorzilla.com/gradient-editor/

于 2013-02-21T10:05:15.650 に答える
0

これが可能な場所を考えることができる唯一の方法は、「SVG スタック」を使用することです。基本的な考え方は、各スプライトは同じ「タイル」の異なる「レイヤー」にありますが、SVG ファイル内の少しの CSS によって非表示/表示されます。

<style>
  svg .icon { display: none }
  svg .icon:target { display: inline } 
</style>

詳細な説明はこちら: http://simurai.com/post/20251013889/svg-stacks

この方法の欠点は、現在 Mozilla でしか機能しないことです。大丈夫です。線形グラデーションを使用して、Mozilla 以外の全員がフォールバック イメージを取得できるようにすることで、この問題を回避できます。

.element {
    background: url(myBG.png);
    background-image: -moz-linear-gradient(transparent, transparent), url(spriteStack.svg#myBG);
}

他のブラウザが SVG バックグラウンドでフラグメントをサポートするようになったら、適切な接頭辞付きの線形グラデーションを追加できます。

背景画像は小さいため、データ URI を使用することをお勧めします。それらは次のようになります。

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");

この画像を何らかの頻度で更新することが予想される場合、Compass (Sass 拡張機能) を使用すると、これらの画像を自動的に生成し、CSS を縮小できます ( http://compass-style.org/reference/compass/helpers/を参照)。 inline-data/#inline-image )。

于 2012-12-30T02:04:11.697 に答える