Implémentation d'une image d'arrière-plan pour A HREF dans CSS

J'ai un href en HTML que je produis de manière dynamique à partir d'un serveur. J'ai conçu une belle image gif en coin arrondie que je voudrais utiliser comme arrière-plan, c'est-à-dire mettre le texte (en blanc) sur l'image gif et l'avoir encore connectable.Implémentation d'une image d'arrière-plan pour A HREF dans CSS

Le html actuel ressemble:

<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...

Quelle est la meilleure façon de le faire avec CSS? Il semble que je pourrais soit utiliser le positionnement relatif pour déplacer le texte sur l'image de fond, mais dans les premières expériences, cela affecte le reste du flux sur la page. Ou peut-être que l'utilisation d'une image de fond CSS est la meilleure façon de le faire?

Source

2009-06-25 timbo

Je ne suis pas sûr, exactement, mais je pense que vous devrez peut-être modifier votre bloc de code pour afficher le code (sélectionnez le code, puis cliquez sur le "101010" bouton). À moins que vous n'ayez essayé de montrer comment cela se passe sur votre site? –

Exemple de HTML aiderait beaucoup. – razzed

Comme le dit Daniel, vraiment:

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 */

Je voudrais aussi -et cela peut être simplement habitude personnelle, et reçu afféterie « wisdom'- suggèrent en utilisant .png au lieu de .gif. Mais, comme indiqué, c'est probablement une chose personnelle et subjective.

Réponse modifiée en réponse au commentaire de timbo.

En outre, et ce n'est pas particulièrement jolie, il y a une démo de code ici: affichage http://davidrhysthomas.co.uk/so/a-img-bg.html

Source

2009-06-25 15:32:01

Super merci! Un indice sur la façon de centrer le test sur le gif? Il est aligné en haut à gauche ... – timbo

Voir l'exemple de code mis à jour. –

Vous devez définir le lien vers display: block

Source

2009-06-25 15:26:26

: bloc sur l'un ou attach l'image d'arrière-plan h2. De toute façon, assurez-vous de définir une couleur d'arrière-plan sur le a ou le h2 si vous utilisez du texte blanc. Si quelqu'un a CSS et les images désactivées, ils ne verront pas votre lien. Signifie que vous devrez peut-être remplir les coins de votre image de coin arrondie à la couleur bg de la page.

Source

2009-06-25 20:03:35

Implémentation d'une image d'arrière-plan pour A HREF dans CSS

Répondre

Questions connexes