Detaillierte Erläuterung der CSS-Bildspleißtechnologie (Sprite-Bild)
|
CSS-Bildspleißtechnologie 1. Bildzusammenfügung
Mit CSS-Styles können wir den Teil des Bildes anzeigen, den wir brauchen Der detaillierte Code lautet wie folgt:
<!doctype html>
<html>
<Kopf>
<meta charset="utf-8"/>
<title>Bildintegration</title>
<Stil>
.Kasten{
Breite: 200px;
Rand: 0 automatisch;
Überlauf: versteckt;
}
.iton{
Breite: 43px;
Rand links: 10px;
Höhe: 44px;
schweben: links;
Hintergrund: URL (Bilder/img_navsprites_hover.gif) keine Wiederholung;
}
.span01{
Hintergrundposition: 0 0;
}
.span02{
Hintergrundposition: -47px 0;
}
.span03{
Hintergrundposition: -91px 0;
}
.span01:hover{
Hintergrundposition: 0 -45px;
}
.span02:hover{
Hintergrundposition: -47px -45px;
}
.span03:hover{
Hintergrundposition: -91px -45px;
}
</Stil>
</Kopf>
<Körper
<div Klasse="Box">
<span class="iton span01"></span>
<span class="iton span02"></span>
<span class="iton span03"></span>
</div>
<Text>
</html> Die laufenden Ergebnisse sind wie folgt:
Dieser Effekt fügt einen schwebenden Stil hinzu, wenn die Maus über das Element bewegt wird, und legt die Hintergrundposition so fest, dass die Position des Bildes kontinuierlich aktualisiert wird. Geben Sie gern Ihren Rat! Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: W3C Tutorial (5): W3C XML Aktivitäten
>>: So implementieren Sie die Stapellöschung großer Datenmengen in großen MySQL-Tabellen
Artikel empfehlen
JavaScript-Grundlagen für Schleife und Array
Inhaltsverzeichnis Schleife - für Grundlegende Ve...
Tipps zur Verwendung kleiner HTML-Tags
Phrasenelemente wie <em></em> können d...
Konfigurationsschritte für die MySQL-Gruppenreplikation (empfohlen)
MySQL-Group-Replication ist eine neue Funktion, d...
So verwenden Sie Mixins in Vue
Inhaltsverzeichnis Vorwort Anwendung Zusammenfass...
Tiefgreifendes Verständnis des Ereignisausführungsmechanismus von JavaScript
Inhaltsverzeichnis Vorwort Das Prinzip der asynch...
Lassen Sie uns über die Leistung von MySQLs COUNT(*) sprechen.
Vorwort Im Grunde verwenden Programmierer am Arbe...
Lösungen für ungültige Nullsegmentbeurteilungen und IFNULL()-Fehler in MySql
MySql Nullfeldbeurteilung und IFNULL-Fehlerverarb...
So verwenden Sie das Realip-Modul im Nginx-Grundlagenlernen
Vorwort Es gibt zwei Arten von Nginx-Modulen: off...
Lösung für das Problem „/bin/sh: pip: Befehl nicht gefunden“ beim Erstellen der Docker-Datei
Der Inhalt des geschriebenen Dockerfiles ist: VON...
Empfehlen Sie mehrere MySQL-bezogene Tools
Vorwort: Mit der kontinuierlichen Entwicklung der...
uniapp implementiert Datums- und Zeitauswahl
In diesem Artikelbeispiel wird der spezifische Co...
Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript
Wir wissen, dass eine Funktion im Allgemeinen auf...
Detaillierte Erläuterung grundlegender Betriebsbefehle wie Starten und Stoppen von Nginx unter Windows
Um Nginx unter Windows zu verwenden, müssen wir e...
Detaillierte Schritte zur Entwicklung von WeChat-Miniprogrammen mit Typescript
Auf die Vorteile von Typescript müssen wir nicht ...
Detaillierte Erläuterung von vier Lösungen zur Implementierung von Inline-Scrolling auf Mobilgeräten
Bedürfnisse entdecken Wenn nur ein Teil eines Ber...