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
Tutorial zur Installation und Verwendung von Docker MQTT
Einführung in MQTT MQTT (Message Queuing Telemetr...
MySQL implementiert das automatische Hinzufügen von Zeit und das automatische Aktualisieren von Zeit
Zeitfelder werden häufig bei der Datenbanknutzung...
Über das Vue Virtual Dom-Problem
Inhaltsverzeichnis 1. Was ist virtueller Dom? 2. ...
Verwenden Sie Docker Compose, um ELK schnell bereitzustellen (getestet und effektiv)
Inhaltsverzeichnis 1. Übersicht 1.1 Definition 1....
Detaillierte Erklärung des Unterschieds zwischen Vue-Lebenszyklus
Lebenszyklusklassifizierung Jede Komponente von V...
Allgemeine Funktionen der MySQL-Grundlagen
Inhaltsverzeichnis 1. Allgemeine Funktionsklassif...
Tipps zum Anzeigen von Verlaufsdatensätzen und Hinzufügen von Zeitstempeln in Linux
Tipps zum Anzeigen von Verlaufsdatensätzen und Hi...
Vollständiges Tutorial zur Installation von Apache, MySQL, PHP, LAMP auf Ubuntu 18.04
1. Installieren Sie Apache $ sudo apt update &...
HTML-Basis-URL-Tag
Seine Funktion besteht darin, einen globalen Stil ...
Tiefes Verständnis der JavaScript-Syntax und Codestruktur
Inhaltsverzeichnis Überblick Funktionalität und L...
Analyse des Kompilierungsprozesses des Remax-Frameworks zum Schreiben kleiner Programme mit React (empfohlen)
Remax ist ein von Ant entwickeltes Open-Source-Fr...
Implementierung der MySQL-Datentypkonvertierung
1. Problem Es gibt eine Tabelle wie unten gezeigt...
So aktualisieren, verpacken und laden Sie Docker-Container in die Alibaba Cloud hoch
Dieses Mal werden wir versuchen, den laufenden Co...
Vue implementiert eine kleine Notizblockfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der benutzerdefinierten Konfiguration des offiziellen Docker-MySQL-Image
Um Installationszeit zu sparen, habe ich zum Star...