L'une des choses que je le plus souvent demandé par les gens qui essaient de maîtriser HTML et CSS est « Comment puis-je faire une cliquable image de fond? » Il est facile d'envelopper une étiquette d'image régulière dans un lien, mais si votre conception ou de la situation exigeait que vous utilisez une image de fond? Il est en fait assez simple. Il suffit de suivre ces étapes et je vais vous montrer comment faire une image cliquable de fond comme celui-ci:
Commencez avec juste un lien exactement comme vous le feriez pour tout autre but, et assurez-vous de donner le lien d'un identifiant afin que nous puissions l'utiliser pour appliquer nos styles:
C'est tout le (X) HTML, vous devez faire votre cliquable image d'arrière-plan. Votre lien devrait ressembler à ceci: Range Développement Web
Alors, comment pouvons-nous faire une image de fond cliquable lien? Il se trouve, il peut être fait avec un truc CSS intelligent. Commençons par ajouter l'image de fond et de faire le lien de la même taille que l'image (vous pouvez donc voir l'image entière). Depuis une balise d'ancrage est pas un élément de niveau bloc, nous devons forcer à afficher comme « bloc » afin que nous puissions spécifier la taille:
À ce stade, il devrait ressembler à ceci: Range Développement Web
Maintenant, tout ce que nous devons faire est de cacher le texte. Cela peut être fait en utilisant « text-indent » et indenter le texte complètement hors de l'écran comme celui-ci:
Et le produit fini ressemble à ceci: Gamme Développement Web
J'utilise wordpress et je suis très confus au sujet de l'endroit où placer le code HTML. Est-ce que je mets le code HTML dans index.php ou header.php?
Vous expliquez toutes les autres étapes très bien, mais vous me laissé très confus sur la partie html. Je l'ai regardé d'autres tutoriels qui décrivent comment faire cela, mais ils semblent tous croire que vous savez ce fichier à éditer pour le html. Donc, je manque probablement quelque chose de vraiment évident, mais je voudrais vraiment obtenir une explication sur l'endroit où placer le code html.
Pensez-vous que l'ajout de texte valide dans le paramètre ALT de la balise HREF corrigerait ce problème potentiel?
Sinon, bon conseil, Aaron. Merci!
La raison pour laquelle je ne répondais pas c'est parce qu'il est vraiment pas une question d'une « bonne réponse ». Les « experts » ont tendance à être en désaccord là-bas, chacun ayant leur propre opinion. Nous * ne savent * que Google (et probablement d'autres moteurs de recherche) n'essayiez-vous pas afficher quelque chose de différent pour eux que vous affichez à vos utilisateurs. Cependant, si vous liez une image régulière que vous souhaitez utiliser alt-texte dans la balise d'image. Ce que vous donne cette même capacité mais avec une image d'arrière-plan.
En fin de compte, je ne suis pas inquiet à ce sujet. Je l'utilise dans plusieurs endroits et n'ont pas remarqué des pénalisations. Cependant, si cela vous inquiète ... ne l'utilisez pas.
Et toujours mon image de fond est pas lié. Qu'est-ce que je fais mal? Waaaaah!
Deux choses: 1) Tu sembles genre de whiney. J'ai 6 ans qui fait assez de cette # 128521; 2) Si vous voulez que cela fonctionne, suivez les instructions contenues dans cet article. Votre HTML et CSS ne ressemblent en rien à ce que j'ai ici.
Je suis en train de modifier un modèle de blog existant (Handgloves, en fait), donc je copiais dans tout ce qu'ils avaient, car il était un peu plus compliqué que html de base. Depuis que je ne suis pas compétent ou css php (évidemment), je tentais de supprimer aussi peu de leur code possible. J'ai inséré le « display: block » et désigné la hauteur / largeur et créé le « text-indent: 9999px » comme vous le suggérez.
J'ai utilisé pour mettre en arrière-plan avec l'image, mais l'image css n'apparaît pas. Ensuite, je mets le code de fond en HTML et l'image apparaît. Je mets le picute de fond en haut au centre et je veux déplacer le lien aussi dans cette position mais je ne sais pas comment. S'il vous plaît quelle règle doit être appliquée css?
J'ai essayé vos suggestions, mais je suis venu les mains vides. Quand j'ajouter le lien vers la page, le lien apparaît mais n'est pas cliquable. Même quand je annonce le style suggéré pour l'image d'arrière-plan dans le tout affiche bien css, mais l'image est cliquable.
Ceci est utilisé sur un thème WordPress dans le modèle de page. Merci encore. Tim
Vous semblez avoir un problème parce que le lien est en fait sous tout le reste, ce qui le rend cliquables. Vous pouvez déplacer le lien vers la fin de votre HTML (juste avant la
tag), ou ajoutez ceci à la #demo CSS:
z-index: 10;
C'est le CSS je. Je l'ai placé dans le dernier fichier CSS et il affiche l'image, mais ce n'est pas cliquable.
Toute aide est acceptée avec reconnaissance. Björn
Comme vous le remarquerez, j'application du CSS sur le lien réel, pas un conteneur autour du lien. Essayez de changer « # élément de menu 51 » à « # menu-item-51 a » et il devrait fonctionner.
Quelqu'un at-il essayé de le faire avec un fond de roulement?
Comme dans un bouton (60px haut avec un pas de vol stationnaire et vol stationnaire supérieure et la moitié inférieure) de style comme ceci:
J'ai essayé quelques petites choses sur mon bureau
Qu'est-ce que Antonio a demandé Je l'ai lu et relu et essayé et essayé et maintenant je besoin d'aide s'il vous plaît. Y at-il de toute façon de faire cliquable fond du corps. J'ai ajouté mon CSS ci-dessous.
Merci et espère que les vacances se sont bien passées.
UPS, le code html a été effacé, je devais changer les accolades avec ^:
Oh mon Dieu! Je t'aime! J'ai utilisé la deuxième partie sous mon élément de corps et changé le sélecteur id « background-link ». Essayé de le comprendre pour les âges. Sérieusement, vous aimez.
Dah! J'ai parlé au début. Le fond lié se trouve en dessous de mon conteneur au lieu de derrière, ce qui signifie que vous devez faire défiler vers le bas après tout le contenu pour se rendre à l'arrière-plan lié. Aucune suggestion?
corps background-image: url ( « images / bg.png '); Position de fond: partie centrale supérieure; background-attachment: fixed; >
Ça ne fait rien. Vous avez à travailler en utilisant des couches d'index Z.
En gros, faites ce que vous avez dit sans mesures supplémentaires ne fonctionnera pas, et même si vous le faire fonctionner, il serait invalide.
corps background-image: url ( « images / bg.png '); Position de fond: partie centrale supérieure; background-attachment: fixed; bloc de visualisation; hauteur: 1000px; largeur: 1600px; >
ps - je ne comprend pas le retrait du texte, car il fait disparaître mon tête entière pour une raison quelconque.
Je sais que cet exemple est d'avoir l'image d'arrière-plan sans texte visible.
Je veux savoir la meilleure façon d'afficher réellement texte, précisément positionné dans le bloc div. Je l'ai essayé d'utiliser un rembourrage, mais qui élargit la zone de délimitation de la div, et la zone cliquable. J'ai aussi joué avec text-indent et la hauteur de la ligne mais ils ne convient pas vraiment.
En fait, j'ai essayé de mettre le texte dans un autre div et positionné en conséquence et, bien que ce n'est pas conforme aux normes W3C, il a passé la validation et fonctionne dans tous les navigateurs.
Quelles sont vos pensées?
Je vous demande pardon, il n'a pas passé la validation, mais ne fonctionne parfaitement bien. Cependant, je préfère utiliser un code valide.
Si vous jouez avec hauteur de ligne de haut en bas, et le rembourrage pour gauche et à droite, vous pouvez obtenir tout ce que vous voulez alignement. Rappelez-vous que si vous ajoutez le rembourrage gauche / droite vous devez soustraire que de la largeur.
Thx pour la réponse Aaron. Bien sûr, la largeur / hauteur peut être ajustée en fonction de la taille de l'image. Duh.
Si je voulais utiliser 2 blocs de texte mis en forme différemment dans ce même div, est-il un moyen de le faire?
Pexsol dit Interactive:
Pourquoi ne pas utiliser quelque chose comme? Dans le CSS, définissez style = curseur: pointeur et sur la DIV ajouter un événement onclick.
Salut, débutant css ici.
fond html: url (wp-content / plugins / underconstruction / kyrkahome.png) no-repeat centre central fixe; -webkit-taille de fond: couvercle; -MOZ-taille de fond: couvercle; --Size o-fond: couvercle; Taille de fond: couvercle;
Pourquoi y at-il des pages soooo beaucoup, comme celui-ci, qui jonchent le web. Vous ne pouvez pas faire une page qui affiche correctement,
mais insister sur des conseils à distribuer d'autres sur la façon de le faire.
Merci de me pointer dans la bonne direction # 128578; Je n'aimais pas les grandes lignes en pointillés qui a couru hors de la page à cause du tiret. Voici donc ma version révisée de ce que votre truc.
Voici ce que je l'ai fait ...
Je mis en œuvre cette classe comme dans le lien suivant:
Placez ci-dessus où vous souhaitez insérer le logo ou même une image, vraiment.
Je style = » color: transparent; » (Sinon le lien affichera.)
Je text-align: center; (Dans le cas où vous préférez montrer le lien sur l'image Ceci est utile pour moi comme je l'utiliser de cette façon parfois je supprimer simplement la couleur en ligne:... Transparente, dans ce cas)
largeur et la hauteur doit correspondre aux dimensions exactes (en px) de l'image que vous utilisez.
décrire: none; est de supprimer la ligne pointillée qui entoure les liens lorsque vous cliquez dessus.
Vous n'avez pas besoin de spécifier le texte ICI pour que cela fonctionne. Dans ce cas, vous ne aurez pas besoin d'utiliser la couleur: transparent; dans le
Je suppose que par l'absence de texte ou un lien entre les deux, les moteurs de recherche ne pourrait pas indexer? Je ne sais pas vraiment.
J'espère que ça aidera quelqu'un.
Oops, j'ai oublié les balises de code.
Merci de me pointer dans la bonne direction # 128578; Je n'aimais pas les grandes lignes en pointillés qui a couru hors de la page à cause du tiret. Voici donc ma version révisée de ce que votre truc.
Voici ce que je l'ai fait ...
Je mis en œuvre cette classe comme dans le lien suivant:
Placez ci-dessus où vous souhaitez insérer le logo ou même une image, vraiment.
Je style = » color: transparent; » (Sinon le lien affichera.)
Je text-align: center; (Dans le cas où vous préférez montrer le lien sur l'image Ceci est utile pour moi comme je l'utiliser de cette façon parfois je supprimer simplement la couleur en ligne:... Transparente, dans ce cas)
largeur et la hauteur doit correspondre aux dimensions exactes (en px) de l'image que vous utilisez.
décrire: none; est de supprimer la ligne pointillée qui entoure les liens lorsque vous cliquez dessus.
Vous n'avez pas besoin de spécifier le texte ICI pour que cela fonctionne. Dans ce cas, vous ne aurez pas besoin d'utiliser la couleur: transparent; dans le
Je suppose que par l'absence de texte ou un lien entre les deux, les moteurs de recherche ne pourrait pas indexer? Je ne sais pas vraiment.
J'espère que ça aidera quelqu'un.
Merci pour remarquer que! Il semble que lorsque je me suis déplacé des domaines que l'image est perdu dans le shuffle. Il a été restauré et devrait ressembler correct maintenant.
dit Iliia Shterev:
Nice astuces Aaron - merci! Pleace me aider avec mon problème.
Je veux DoT se débarrasser du texte. En fait, je besoin soigneusement placé sur une image qui ressemble à un magasin bouton panier. Je veux dire un texte dynamique pour ex. « 3 produits dans votre panier ». Je suis un développeur ASP.NET expérimenté, donc en tirant le nombre de produits de DB n'est pas un problème pour moi. Mais je ne suis pas très CSS incliné et poli.
Jusqu'à présent, je retirai text-indent: -9999px;
et afin de placer le texte où je besoin j'ai utilisé
padding: 10px 0px 0px 12px;
Meilleures salutations de la Bulgarie.
dit Chargeful Chap:
salut, je l'ai utilisé ce code en fonction de votre
background-image #banner: url (images / menutop.gif); background-repeat: no-repeat; Position de fond: en haut à gauche; bloc de visualisation; hauteur: 100px; largeur: 320px; >
il owrks grand, mais si vous définissez la propriété d'image d'arrière-plan dans la balise corps, alors ma bannière se positionne à gauche en haut absolu de la page (sans espace blanc) mais en utilisant votre méthode theres espace blanc en haut et à gauche de l'image. Comment puis-je placer ce sommet absolu laissé sans lacunes.
Aaron, Je suis venu avec une autre solution que le vôtre. J'espère que cela t'aides.
Merci pour ça. solution EXACT je avais besoin. Grande leçon. Vraiment apprécier que tu me aidé.