Voeg een link toe aan een afbeelding in een CSS-stijlblad

Ik ben op zoek om een ​​link naar een afbeelding in een CSS-stijlblad toe te voegen, zodat deze naar de koppeling zal navigeren wanneer de afbeelding wordt ingedrukt.

De code voor de afbeelding zelf is:

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

Wat is de code om toe te voegen om het toe te laten om naar een hyperlink te navigeren? Bijvoorbeeld: als ik wilde dat het moet navigeren naar http://home.com


Antwoord 1, Autoriteit 100%

U kunt dat niet doen …

Via CSS De URLU plaatst de background-imageis alleen voor de afbeelding.

Via HTMLU moet de hrefvoor uw hyperlink op deze manier toevoegen:

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

Met text-indenten een andere cssU kunt uw een element aanpassen om alleen de afbeelding te tonen en erop te klikken, u gaat naar uw link.


EDIT:

Ik ben hier weer om je te laten zien en uit te leggen waarom mijn oplossing veel beter is:

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

Dit blok van HTMLis seo vriendelijk omdat u een tekst in uw link hebt!

Hoe het te stylen met CSS:

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

Als je niet om SEOgeeft, is het goed om het andere antwoord te kiezen.


Antwoord 2, autoriteit 12%

Je voegt geen links toe aan stylesheets. Ze zijn bedoeld om de stijl van de pagina te beschrijven. U zou uw opmaak wijzigen of JavaScript toevoegen om te navigeren wanneer op de afbeelding wordt geklikt.

Alleen op basis van uw stijl zou u het volgende hebben:

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

Antwoord 3, autoriteit 6%

Je zou zoiets kunnen doen

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

in HTML


Antwoord 4

Ik kwam deze oude lijst tegen terwijl ik over dezelfde vraag nadacht. Mijn pleister voor dezelfde vraag was om van mijn koptekst een link te maken. Ik veranderde toen de kleur en verwijderde tekstdecoratie met CSS. Om nu van de hele kopafbeelding een link te maken, heb ik de opvulling van de ankertag uitgebreid tot deze dicht bij de rand van de kopafbeelding kwam…. Dit werkte naar mijn tevredenheid en ik dacht dat ik het zou delen.

Other episodes