Implementieren des Hintergrundbilds für A HREF in CSS

Ich habe einen HREF in HTML, die ich dynamisch von einem Server produziere. Ich habe ein schönes abgerundetes Eck-GIF-Bild entworfen, das ich als Hintergrund verwenden möchte, d.h. den Text (in weiß) über das GIF-Bild zu setzen und es noch verlinken zu lassen.

Der aktuelle HTML-Code sieht aus wie:

<h2>
  <!--img src="images/greenback.gif"-->
  <a id="site-title0" class="titletext" href="#">
    Alligator Creek, Bowling Green Bay National Park
  </a>
</h2>
<div id="descrip0" class='description'>
  20km S of Townsville. $4.85/night. Gates close...

Was ist der beste Weg, dies mit CSS zu tun? Es scheint, dass ich entweder relative Positionierung verwenden könnte, um den Text über das Hintergrundbild zu verschieben, aber in frühen Experimenten wirkt sich dies auf den Rest des Flows auf der Seite aus.

Oder ist die Verwendung von CSS-Hintergrundbild der beste Weg?

Antwort auf "Implementieren des Hintergrundbilds für A HREF in CSS " 3 von antworten

Sie müssen den Link auf display: block

setzen

Wie Daniel sagt, wirklich:

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
                   background: #fff url(path/to/image.gif) top left no-repeat; 
                   text-align: center;
                   line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */

Würde ich auch - und das kann einfach persönliche Gewohnheit, Affekt und erhaltene 'Weisheit' sein - vorschlagen, .png rather than anstelle von .gif. But, as noted, it's likely a personal and subjective thing. zu verwenden. Aber, wie bereits erwähnt, es ist wahrscheinlich eine persönliche und subjektive Sache.

Antwort als Antwort auf timbo Kommentar bearbeitet.

Auch, und das ist nicht besonders hübsch, gibt es hier eine Code-Demo: http://davidrhysthomas.co.uk/so/a-img-bg.html

Anzeige: blockieren Sie das a oder befestigen Sie das Hintergrundbild an das h2. Stellen Sie in beiden Richtungen sicher, dass Sie eine Hintergrundfarbe auf dem a oder dem h2 festlegen, wenn Sie weißen Text verwenden. Wenn einer CSS eingeschaltet hat und Bilder ausgeschaltet sind, wird ihr Link nicht angezeigt. Bedeutet, dass Sie möglicherweise die Ecken des abgerundeten Eckbilds in die bg-Farbe der Seite ausfüllen müssen.