Wie kann ich ein zugeschnittenes Bild innerhalb eines CSS-Sprites skalieren?

Skalieren Sie ein zugeschnittenes Bild in einem CSS-Sprite

Im Artikel „Erstellen Sie CSS-Sprites, um die Leistung Ihrer Seite zu verbessern“ wird erklärt, wie das geht Schneiden Sie ein kleineres Bild aus einem größeren Bild aus. Es kann jedoch vorkommen, dass Sie das zugeschnittene Bild skalieren müssen, bevor Sie es in Ihr Design integrieren. Dies kann mit verschiedenen Techniken erreicht werden.

Background-Size-Methode (IE9, moderne Browser)

Verwenden Sie die Eigenschaft „background-size“, um die gewünschte skalierte Größe des anzugeben zugeschnittenes Bild. Wenn Sie beispielsweise die Bildgröße verdoppeln möchten, verwenden Sie den Wert 150 % 150 %.

background-size: 150% 150%;

Zoom- und Transformationsskalierung

Für browserübergreifende Kompatibilität , kombinieren Sie Zoom für WebKit-/Blink-/IE-Browser mit transform:scale für Mozilla und älteres Opera Browser.

[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 dieser Methode können Sie bestimmte zugeschnittene Bereiche des Sprites skalieren, ohne andere Segmente zu beeinträchtigen. Sie können die Zoom- und Skalierungswerte anpassen, um die gewünschten Größen zu erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein zugeschnittenes Bild innerhalb eines CSS-Sprites skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!