Wie kann ich zugeschnittene Bilder in CSS-Sprites skalieren?

Skalieren von zugeschnittenen Bildern in CSS-Sprites

Der Artikel mit dem Titel „CSS-Sprites: Techniken zur Verbesserung der Webleistung“ diskutiert Methoden zum Zuschneiden kleinerer Bilder aus ein größeres Bild. In diesem Artikel wird die Möglichkeit untersucht, den zugeschnittenen Bereich nicht nur zuzuschneiden, sondern auch zu skalieren, bevor er im Layout platziert wird.

Wie im Artikel gezeigt, könnte ein Beispiel-CSS-Code-Snippet so aussehen:

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

Um das zugeschnittene Bild zu skalieren, nachdem es aus dem Sprite extrahiert wurde, kann die Eigenschaft „Hintergrundgröße“ verwendet werden. Diese Eigenschaft wird von den meisten gängigen Browsern (aber nicht allen) unterstützt. Um beispielsweise das zugeschnittene Bild auf 150 % seiner Originalgröße zu skalieren, könnte die folgende Stilregel verwendet werden:

background-size: 150% 150%;

Ein anderer Ansatz zum Skalieren des zugeschnittenen Bildes besteht darin, eine Kombination aus Zoom und Transformation zu verwenden: Skaleneigenschaften. Diese Methode bietet browserübergreifende Unterstützung sowohl für Desktop- als auch für Mobilgeräte. Hier ist ein Beispiel:

[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;
}

Mit diesen Techniken ist es möglich, kleinere Bilder aus einem CSS-Sprite zuzuschneiden und zu skalieren, was eine größere Flexibilität und Anpassung bei der Arbeit mit Webseitenlayouts ermöglicht.

Das obige ist der detaillierte Inhalt vonWie kann ich zugeschnittene Bilder in CSS-Sprites skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!