Rendere CSS Immagine un link

Sto lavorando su un sito e ho bisogno di un’immagine in alto a destra un link ad un altro sito quando si fa clic. Ho creato questo nel file CSS:

div.image:before {
content:url(http://LinkToMyImage);
max-height: 169px;
max-width: 220px;
position: absolute;
top: 0px;
right: 0px;
}

Quindi aggiungere questo codice html:

<div class="image"></div>

Che appare esattamente come la voglio, ma ovviamente non è un link, c’è un modo per rendere questo collegabile? Ho provato a href i div, ma che non funziona. Qualsiasi aiuto è molto apprezzato! Grazie!

  • hai provato con un <a> tag?
  • E ‘ impossibile fare generated content collegabile a meno che non è contenuto all’interno di un <a> tag.

 

One Reply
  1. 2

    È possibile eseguire esattamente la stessa cosa, semplicemente utilizzando un tag di ancoraggio. Inoltre, non c’è bisogno di essere in modo specifico con il vostro css facendo riferimento all’elemento di classe si applica per. Che avrà un po ‘ più tempo, rispetto a solo utilizzando il nome della classe.

    Se avete bisogno di un più alto livello di specificità, destinazione il vostro elemento con un altro nome della classe. Evitando di uno specifico elemento rende il codice più flessibile dovrebbe markup bisogno di cambiare in futuro.

    Modificare il codice html per:

    <a class="image"></a>

    e il tuo css:

    .image:before {
        content:url('http://LinkToMyImage');
        //You should also be able to safely eliminate `display: block;`
        //when setting `position: absolute`, but included it just in case you
        //experienced problems setting width and height
        display: block;
        height: 169px;
        width: 220px;
        position: absolute;
        //top 0 is usually inferred when setting position: absolute;
        //you should be able to remove this
        top: 0px;
        right: 0px;
    }
    • Forse cercavi per modificare il codice HTML per <a class="image"></a>? Ora, è esattamente come è nella domanda.
    • Sì, scusa. Ho aggiornato la mia risposta.
    • Grazie, Brandon! Io odio quando mi si blocca su cose semplici come questo… Letteralmente passato 3 ore a cercare di capire questo prima di chiedere qui e la correzione, naturalmente, ha preso secondi. Grazie ancora!

Lascia un commento