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
Der einfachste Weg, MySQL 5.7.20 mit yum in CentOS 7 zu installieren
Die Standarddatenbank von CentOS7 ist MariaDB, ab...
Vue realisiert die Funktion eines Bucheinkaufswagens
In diesem Artikelbeispiel wird der spezifische Co...
Erweiterte Closures in JavaScript erklärt
Inhaltsverzeichnis 1. Das Konzept der Schließung ...
Diagramm des Installations- und Verwendungstutorials für MySQL 8.0.17
Vorne geschrieben In der Vergangenheit und in akt...
MySQL-Update-Fall Update-Feldwert ist keine feste Operation
Wenn bei der Verarbeitung von Batch-Updates besti...
Detaillierter Prozess zum Ändern des Hostnamens, nachdem Docker einen Container erstellt hat
Es gibt ein Heilmittel gegen Reue auf der Welt, s...
So öffnen Sie den Port in Centos7
Die Standard-Firewall von CentOS7 ist nicht iptab...
Details zur Destrukturierungszuweisung in Javascript
Inhaltsverzeichnis 1. Array-Dekonstruktion 2. Obj...
Vue implementiert Drag & Drop für mehrspaltiges Layout
In diesem Artikel wird der spezifische Code von V...
So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop
Inhaltsverzeichnis Vorwort 1. Technisches Prinzip...
Ein einfaches Tutorial zur Verwendung des MySQL-Protokollsystems
Inhaltsverzeichnis Vorwort 1. Fehlerprotokoll 2. ...
So verwenden Sie den Linux-Befehl whatis
01. Befehlsübersicht Der Befehl whatis sucht in e...
Erläuterung der Docker Compose-Netzwerkeinstellungen
Grundlegende Konzepte Standardmäßig erstellt Comp...
Einführung in die grundlegenden Konzepte und Technologien der Webentwicklung
Heute stellt dieser Artikel Anfängern einige grun...
Informationen zur Auswahl des Uhrzeit-, Datums- und Zeichenfolgentyps in MySQL
Inhaltsverzeichnis 1. Verwendung von DATETIME und...