web-dev-qa-db-fra.com

Ajouter un lien vers une image dans une feuille de style css

Je cherche à ajouter un lien vers une image dans une feuille de style afin qu’il se connecte au lien lorsque l’image est pressée. 

Le code de l'image elle-même est:

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

Quel est le code à ajouter pour lui permettre de naviguer vers un lien hypertexte? Par exemple: Si je le voulais, allez sur http://home.com

csshyperlinkstylesheet
5
Marc L

Vous ne pouvez pas le faire...

via css la URL que vous avez mise sur le background-image est juste pour l'image.

Via HTML, vous devez ajouter la href pour votre lien hypertexte de la manière suivante:

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

Avec text-indent et un autre css, vous pouvez ajuster votre élément pour afficher uniquement l'image. En cliquant dessus, vous accédez à votre lien.

MODIFIER:

Parce que je suis sûr que vous êtes paresseux pour rechercher le retrait de texte et pour essayer mon code, vous aviez du texte sur votre image. Je suis ici pour vous montrer et expliquer pourquoi ma solution est bien meilleure:

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

Ce bloc de HTML est SEO friendly parce que votre lien contient du texte!

Comment le coiffer avec css:

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

Alors si vous ne vous souciez pas deSEObon de choisir l’autre réponse.

13
Andrea Turri

Vous n'ajoutez pas de liens vers des feuilles de style. Ils servent à décrire le style de la page. Vous pouvez modifier votre marge ou ajouter du JavaScript pour naviguer lorsque vous cliquez sur l'image.

Basé uniquement sur votre style, vous auriez:

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

Vous pourriez faire quelque chose comme

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

en HTML

0
Saryk

Je suis tombé sur cette ancienne liste en réfléchissant à la même question. Mon pansement pour cette même question était de transformer le texte de mon en-tête en un lien. J'ai ensuite changé la couleur et supprimé la décoration du texte avec CSS. Maintenant, pour que l’en-tête représente un lien, j’ai étendu le remplissage de la balise ancre jusqu’à ce qu’elle atteigne le bord de l’image en-tête….

0
Lars