So schreiben Sie ein Bild als Hintergrund und einen Link (Hintergrundbild plus Link)

So schreiben Sie ein Bild als Hintergrund und einen Link (Hintergrundbild plus Link)

Dabei wird das Bild als Hintergrund verwendet und der Link eingeschrieben. Beispielsweise das Logobild der Website. Beispiel: Kartoffel-Logobild

<a title="Tudou.com Jeder ist der Regisseur des Lebens" href="https://www.jb51.net">Tudou.com</a>

eine {Anzeige: Block;Breite: 170px;Höhe: 42px;Texteinzug: -9999px;Hintergrund: URL (/skin/__g/img/ui/nav/v2_v6.png) 0 0 keine Wiederholung;}
Aufgrund der Z-Einrückung werden die drei Wörter „Tudou.com“ nicht angezeigt. Das Titelattribut ist der Text, der angezeigt wird, wenn die Maus darauf zeigt.
Das Hintergrundbild des <a><span>-Links wird unter normalen Umständen nicht vollständig angezeigt, da es sich bei dem <a>-Link um ein Inline-Element handelt und die Breite- und Höhe-Attribute im CSS-Tag „a“ ungültig sind.

Die Verbesserungsmethode besteht darin, in CSS display:block; oder display:inline-block; zu verwenden und dann die Breite und Höhe festzulegen.

<<:  Detaillierte Schritte zur Installation der Node.js-Umgebung und Pfadkonfiguration unter Linux

>>:  Einige Punkte, auf die wir beim Entwurf einer Webseite achten sollten

Artikel empfehlen

Installationsschritte für das grafische MySQL-Verwaltungstool Navicat

Inhaltsverzeichnis Vorwort 1. Stellen Sie das Ins...

Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

1. Dynamische Abfrageregeln Die dynamischen Abfra...

Details zum JavaScript-Prototyp

Inhaltsverzeichnis 1. Übersicht 1.1 Was ist ein P...

Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0

Heute zeige ich Ihnen einen Neon-Button-Animation...

Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)

Hintergrund Suchen Sie in der Suchmaschine nach d...

Vue implementiert nahtloses Scrollen von Listen

In diesem Artikelbeispiel wird der spezifische Co...

CSS3 realisiert den leuchtenden Randeffekt

Wirkung der Operation: html <!-- Dieses Elemen...

So verwenden Sie „not in“ zur Optimierung von MySql

Als ich kürzlich in einem Projekt eine Auswahlabf...

Detailliertes Tutorial zur Installation und Konfiguration von Nginx unter Centos7

Hinweis: Der grundlegende Verzeichnispfad für die...

Detaillierte Erklärung der JavaScript-Array-Deduplizierung

Inhaltsverzeichnis 1. Array-Deduplizierung 2. Ded...