Wie kann ich die Größe von Bildern in einem CSS-Sprite ändern?

Skalieren von Bildern in CSS-Sprites

In CSS-Sprites ist das Zuschneiden kleinerer Bilder aus einem größeren eine gängige Technik. Was aber, wenn Sie die Größe der zugeschnittenen Teile ändern möchten? So skalieren Sie Bilder in einem CSS-Sprite:

Hintergrundgröße

Wenn die meisten Ihrer Browser die Hintergrundgröße unterstützen, können Sie Folgendes verwenden:

background-size : 150% 150%;

Zoom und Transformation:Skalierung

Für Cross-Browser Kompatibilität: Erwägen Sie die Verwendung einer Kombination aus Zoom und Transform:Scale:

[class^="icon-"]{
    zoom:0.5;
    -moz-transform:scale(0.5);
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
}

.Zoom:

• Unterstützt von Webkit/Blink/IE
• Skaliert entsprechend dem Standardzoom Einstellungen

Transform:scale:

• Unterstützt von Mozilla, altem Opera
• Skaliert unabhängig von den Standardzoomeinstellungen

Mit diesem Ansatz können Sie Ihre zugeschnittenen Bilder innerhalb des Sprites ganz einfach verkleinern oder vergrößern. Um beispielsweise die Größe der Symbole neben „Item1, 2, 3, 4“ im bereitgestellten Beispiel zu reduzieren, erhöhen Sie einfach die Skala(). Sie können auch die Zoom- oder Skalierungswerte nach Bedarf anpassen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von Bildern in einem CSS-Sprite ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!