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
Lösung für vergessenes Linux MySQL-Root-Passwort
Wenn Sie sich bei der Verwendung der MySQL-Datenb...
Detailliertes Tutorial zur Installation von Hbase 2.3.5 auf Vmware + Ubuntu18.04
Vorwort Im vorherigen Artikel wurde Hadoop instal...
Konfigurationshandbuch für den Lastenausgleich auf Ebene 4 von Nginx
1. Einführung in Layer 4 Load Balancing Was ist L...
Vorteile und Nachteile des MySQL Advanced Learning Index sowie Nutzungsregeln
1. Vor- und Nachteile von Indizes Vorteile: schne...
Super detaillierte Schritte zur Installation von Zabbix3.0 auf Centos7
Vorwort Vor Kurzem wurde ein Teil der Geschäftstä...
Analyse der Verwendung des Linux-Schwachstellen-Scan-Tools lynis
Vorwort: Lynis ist ein Sicherheitsprüfungs- und H...
So schreiben Sie Konfigurationsdateien und verwenden MyBatis einfach
So schreiben Sie Konfigurationsdateien und verwen...
Eine vollständige Liste häufig verwendeter MySQL-Funktionen (klassifiziert und zusammengefasst)
1. Mathematische Funktionen ABS(x) gibt den Absol...
CentOS 6.5-Konfiguration: SSH-Anmeldung ohne Schlüssel zur Ausführung des PSSH-Befehls – Erläuterung
1. Überprüfen und installieren Sie pssh, yum list...
Überlegungen zur Kürzung von mehrzeiligem Text mit einer Schaltfläche „Mehr anzeigen“
Ich bin erst kürzlich zufällig auf diese kleine A...
Einführung in die MIME-Kodierung (integriert aus Online-Informationen und praktischen Erfahrungen)
1. MIME: Mehrzweck-Internet-Mail-Erweiterungen Da...
Informationen zur Nginx-GZIP-Konfiguration
Das Prinzip von nginx zur Erzielung einer Ressour...
So scrollen Sie manuell durch Protokolle im Linux-System
Die Protokollrotation ist eine sehr gängige Funkt...
Beispiel für Sterne für den CSS-Bewertungseffekt
Was? Welcher Sternenmantel? Schauen wir uns zur V...
Analyse und Lösung der Gründe, warum geplante MySQL-Aufgaben nicht normal ausgeführt werden können
Inhaltsverzeichnis Vorwort Ursachenanalyse und Lö...