web-dev-qa-db-de.com

Fügen Sie einem Bild in einem CSS-Stylesheet einen Link hinzu

Ich schaue, um einen Link zu einem Bild im ACSS-Stylesheet hinzuzufügen, so dass der Link angezeigt wird, wenn das Bild gedrückt wird. 

Der Code für das Bild selbst lautet:

 #logo{
    background-image: url(images/logo.png);
    width: 981px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;

Was ist der Code, der hinzugefügt werden muss, damit er zu einem Hyperlink navigieren kann? Zum Beispiel: Wenn ich wollte, dass zu http://home.com navigiert wird

csshyperlinkstylesheet
5
Marc L

Das kannst du nicht tun...

über css ist die URL, die Sie auf den background-image legen, nur für das Bild.

Über HTML müssen Sie die href für Ihren Hyperlink folgendermaßen hinzufügen:

<a href="http://home.com" id="logo">Your logo</a>

Mit text-indent und einer anderen css können Sie ein Element so anpassen, dass nur das Bild angezeigt wird. Wenn Sie darauf klicken, gelangen Sie zu Ihrem Link.

BEARBEITEN:

Da ich sicher bin, dass Sie faul sind zu suchen, was Texteinzug tun soll, und versuche, meinen Code zu verwenden, hatten Sie Text in Ihrem Bild.

<a href="http://home.com" id="logo">Your logo name</a>

Dieser Block von HTML ist SEO freundlich weil Sie Text in Ihrem Link haben!

Wie man es mit css gestaltet:

#logo {
  background-image: url(images/logo.png);
  display: block;
  margin: 0 auto;
  text-indent: -9999px;
  width: 981px;
  height: 180px;
}

Wenn Sie sich nicht fürSEOinteressieren, ist es gut, die andere Antwort zu wählen.

13
Andrea Turri

Sie fügen keine Links zu Stylesheets hinzu. Sie beschreiben den Stil der Seite. Sie können Ihr Markup ändern oder JavaScript hinzufügen, um zu navigieren, wenn Sie auf das Bild klicken.

Nur basierend auf Ihrem Stil hätten Sie:

<a href="home.com" id="logo"></a>
1
Schleis

Sie könnten so etwas tun

<a href="http://home.com"><img src="images/logo.png" alt="" id="logo"></a>

in HTML

0
Saryk

Ich bin über dieses alte Angebot gestolpert, das über dieselbe Frage nachdachte. Meine Bandhilfe für diese gleiche Frage bestand darin, aus meinem Kopfzeilentext einen Link zu machen. Ich änderte dann die Farbe und entfernte die Textverzierung mit CSS. Um nun das gesamte Headerbild zu einem Link zu machen, erweiterte ich die Auffüllung des Ankertags, bis sie nahe an den Rand des Headerbilds gelangte. Dies funktionierte zu meiner Zufriedenheit, und ich dachte, ich würde es teilen.

0
Lars