CSS スプライト内でトリミングされた画像を拡大縮小するにはどうすればよいですか?

CSS スプライトでトリミングされた画像を拡大縮小する

「CSS スプライト: Web パフォーマンスを向上させるテクニック」というタイトルの記事では、小さい画像をトリミングする方法について説明しています。より大きな画像。この記事では、レイアウトに配置する前に、トリミングされた領域をトリミングするだけでなくスケーリングする可能性についても検討します。

この記事で示されているように、CSS コード スニペットの例は次のようになります。

A {
  background-image: url(spriteme1.png);
  background-position: -10px -56px;
}

スプライトから抽出された後でトリミングされた画像を拡大縮小するには、background-size プロパティを使用できます。このプロパティは、ほとんどの主要なブラウザーでサポートされています (すべてではありません)。たとえば、トリミングされた画像を元のサイズの 150% に拡大縮小するには、次のスタイル ルールを使用できます:

background-size: 150% 150%;

トリミングされた画像を拡大縮小するもう 1 つの方法は、ズームと変換の組み合わせを利用することです。スケールのプロパティ。この方法では、デスクトップとモバイル デバイスの両方にクロスブラウザーのサポートが提供されます。以下に例を示します:

[class^="icon-"] {
  display: inline-block;
  background: url('../img/icons/icons.png') no-repeat;
  width: 64px;
  height: 51px;
  overflow: hidden;
  zoom: 0.5;
  /* Mozilla support */
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
}

.icon-big {
  zoom: 0.60;
  /* Mozilla support */
  -moz-transform: scale(0.60);
  -moz-transform-origin: 0 0;
}

.icon-small {
  zoom: 0.29;
  /* Mozilla support */
  -moz-transform: scale(0.29);
  -moz-transform-origin: 0 0;
}

これらの技術を使用すると、CSS スプライトから小さな画像を切り取ったり拡大縮小したりできるため、Web ページのレイアウトを操作する際の柔軟性とカスタマイズが向上します。

以上がCSS スプライト内でトリミングされた画像を拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。