Aggiungere un collegamento a un'immagine in un foglio di stile css

Question

Sto cercando di aggiungere un collegamento a un'immagine in un foglio di stile acss in modo che venga visualizzato il nagvigate al collegamento quando si preme l'immagine.

Il codice per l'immagine stessa è:

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

Qual è il codice da aggiungere per consentirgli di passare a un collegamento ipertestuale? Per esempio: se ho voluto che per spostarsi http://home.com

Answer 1

Non puoi farlo ...

tramite CSS il URL si mette sul background-image è solo per l'immagine.

Via HTML si deve aggiungere la href per il collegamento ipertestuale in questo modo:

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

Con text-indent e qualche altra css è possibile regolare il vostro elemento per mostrare solo l'immagine e cliccando su di esso si andrà al tuo link

---

EDIT:

perché sono sicuro che siete pigri per cercare ciò che text-trattino do e cercando il mio codice si ha il testo sulla vostra immagine Sono qui di nuovo per mostrare e spiegare perché la mia soluzione è molto meglio:

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

Questo blocco di HTML è SEO friendly perché avete un testo all'interno del vostro link!

Come per lo stile con i CSS:

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

Poi, se non si cura di SEO bene scegliere l'altra risposta.

Answer 2

Non si aggiungono collegamenti ai fogli di stile. Sono per descrivere lo stile della pagina. Dovresti modificare il mark-up o aggiungere JavaScript per navigare quando l'immagine viene cliccata.

Basato solo sul vostro stile si avrebbe:

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

Answer 3

sono incappato in questo vecchio elenco ponderare questa stessa domanda. Il mio cerotto per questa stessa domanda era di trasformare il mio testo di intestazione in un link. Ho quindi cambiato il colore e rimosso la decorazione del testo con i CSS. Ora per rendere l'intero header un'immagine di un link, ho espanso il padding del tag anchor fino a che non si è avvicinato al bordo dell'immagine dell'header .... Questo ha funzionato in modo soddisfacente, e ho pensato che avrei condiviso.

Answer 4

Si potrebbe fare qualcosa di simile

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

in HTML

Answer 5

Ho bisogno di un link alla mia immagine "android-logo.png" in questo css modo che l'utente può andare a mia app

#header{ 
background: url(images/sawazine_13.jpg) right top no-repeat, url(images/android-logo.png) left center no-repeat #70af44; 
margin: 0; 
padding: 0; 
height: 120px; 
color: #05310C;