CSS World – Code-Praxis: Präsentation zu alternativen Bildinformationen
|
Wenn wir jedoch das Element <img> mit der Standardquelle (src) verwenden, um den Ladeeffekt durch Scrollen zu erzielen, kann es zu folgendem Erfahrungsproblem kommen: Wenn unser JavaScript langsam lädt, weist unsere Seite wahrscheinlich Flecken mit weißen Bildbereichen auf, reinweiß, ohne jegliche Informationen, und der Benutzer hat keine Ahnung, was der Inhalt ist.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>CSS World – Code-Praxis – Präsentation alternativer Bildinformationen</title>
<Stil>
/* Scrolling-Ladeeffekt CSS */
/* img {
Sichtbarkeit: versteckt;
}
img[Quelle] {
Sichtbarkeit: sichtbar;
} */
img {
Anzeige: Inline-Block;
Breite: 180px;
Höhe: 100px;
/* Alternativtext in Firefox verbergen */
Farbe: transparent;
Position: relativ;
Überlauf: versteckt;
}
img:nicht([src]) {
/* Chrome-Alt-Text und silbernen Rand ausblenden */
Sichtbarkeit: versteckt;
}
img::vor {
/* Hellblauer Hintergrund */
Inhalt: "";
Position: absolut;
links: 0;
Breite: 100 %;
Höhe: 100%;
Hintergrundfarbe: #f0f3f9;
Sichtbarkeit: sichtbar;
}
img::nach {
/* Schwarze Alt-Informationsleiste*/
Inhalt: attr(alt);
Position: absolut;
links: 0;
unten: 0;
Breite: 100 %;
Zeilenhöhe: 30px;
Hintergrundfarbe: rgba(0, 0, 0, .5);
Farbe: weiß;
Schriftgröße: 14px;
transformieren: übersetzenY(100%);
/* Einige Übergangsanimationseffekte hinzufügen*/
Übergang: Transformation .2s;
Sichtbarkeit: sichtbar;
}
img:hover::nach {
transformieren: übersetzenY(0);
}
</Stil>
</Kopf>
<Text>
<div style="Breite: 200px;Höhe: 200px;Hintergrund: blanchedalmond;Überlauf: auto;">
<!-- Scrolling-Ladeeffekt HTML: -->
<!-- <img> -->
<img alt="Bild 1" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726,2864900975&fm=26&gp=0.jpg">
<img alt="Schöne Frau meditiert" data-src="1.jpg">
<img alt="Bild 3" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg">
<img alt="Meditationsbild" data-src="1.jpg">
</div>
</body>
<Skript>
</Skript>
</html>Wirkung der Operation:
Dies ist das Ende dieses Artikels über CSS World – Präsentation von ALT-Bildinformationen in der Code-Praxis. Weitere relevante Inhalte zu CSS-ALT-Bildinformationen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung
Artikel empfehlen
Erstellen und Verwenden von Docker-Datenvolumencontainern
Ein Datenvolumencontainer ist ein Container, der ...
3D-Tunneleffekt implementiert durch CSS3
Der erzielte EffektImplementierungscode html <...
Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React
Inhaltsverzeichnis Installieren und Einführen von...
Vue implementiert eine Scroll-Ladetabelle
Inhaltsverzeichnis Ergebnisse erzielen Wissensres...
Weitergabe von SQL-Optimierungserfahrungen, wenn der Offset beim MySQL-Paging zu groß ist
Finden Sie das Problem Wenn wir den Inhalt in ein...
Verschiedene Methoden zum Aufrufen von js in einem werden herausgestellt und zur Verwendung empfohlen.
Wir verwenden Klickereignisse häufig im A-Tag: 1. ...
Detaillierte Erläuterung des Cache-Implementierungsprinzips von Vue-Berechnungen
Inhaltsverzeichnis Berechnete Daten initialisiere...
Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites
Als ich kürzlich Apple.com/Ebay.com/Amazon.com/sh...
So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue
Inhaltsverzeichnis Einrichten einer einfachen HTT...
Einfache Verwendung des Vue Vee-Validate-Plugins
Inhaltsverzeichnis 1. Installation 2. Import 3. V...
Die Bedeutung des Statuscodes im HTTP-Protokoll
Ein Statuscode, der eine vorläufige Antwort anzei...
Warum ist die Bildlaufleiste auf der Webseite rechts angebracht?
Warum befinden sich die Bildlaufleisten der Brows...
Was ist eine HTML-Datei? So öffnen Sie eine HTML-Datei
HTML steht für Hypertext Markup Language. Heutzut...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Win10 Home Version 64
Als absoluter Neuling habe ich gerade angefangen,...
So lösen Sie das Problem des Befehlsfehlers, der durch das Überschreiben des ursprünglichen Pfads und die Meldung „Befehl nicht gefunden“ verursacht wird
Ein Kollege bat mich, ihm dabei zu helfen, heraus...