Ankertag klickbaren Bereich größer als Bild innerhalb

Question

gesehen diese Frage schon ein paar Mal gefragt, aber scheint, wie Lösungen für einige andere aber nicht arbeiten:

-Code lautet wie folgt:

.headbuttons { 
 
    opacity: .7; 
 
    background-color: grey; 
 
    background-blend-mode: overlay; 
 
    display: block; 
 
}

<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html"> 
 
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>

Versucht die vorgeschlagene Lösung von Inline-Block und Block zu zeigen, aber keiner funktionierte, klickbare Fläche immer noch viel größer als das Bild selbst.

Answer 1

Sie Ihre CSS folgende Änderung, die Breite und die Höhe beinhaltet:

.headbuttons { 
 
    opacity: .7; 
 
    background-color: grey; 
 
    background-blend-mode: overlay; 
 
    display: block; 
 
    width: 125px; 
 
    height: 62.5px; 
 
}

<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html"> 
 
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>

Answer 2

Ich glaube, Sie mit Breite und Höhe festlegen können, in etwa so aussehen: <a width="125" height="62.5">