Trick CSS Transformer une image de fond en lien cliquable - Take 2
Ma solution précédente à cela a été construit sur la technique « de remplacement de l'image accessible » de Phark. Il fonctionne en poussant le texte vraiment loin vers la gauche (9.999 pixels) qui assure qu'il est là pour les lecteurs d'écran, mais caché des utilisateurs (sauf si quelqu'un a un écran qui est capable de montrer près de 10 000 pixels à gauche du conteneur en question). Le problème semble être que certains navigateurs, comme celui sur l'iPad, rendent une boîte de 9,999px même si ce n'est pas visible. Cela affecte les performances, en particulier pour les animations.
Eh bien, il y a une meilleure façon. Il fonctionne de la même, mais au lieu de pousser le contenu textuel jusqu'à présent laissé que nous sommes sûrs qu'il est en dehors de la zone visible, nous poussons juste en dehors de la boîte à droite. L'avantage est que même sans savoir combien de temps le texte est, nous savons exactement jusqu'où pousser pour vous assurer qu'il est complètement hors de la boîte. Donc, si vous vous demandez: « Comment puis-je faire une cliquable image de fond? » Voici la nouvelle réponse. Il est facile, 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 » indenter le texte juste à l'extérieur de la boîte contenant, en utilisant « espace blanc » mis à NOWRAP de garder le texte de l'emballage dans la boîte, et en utilisant « trop-plein » pour cacher le contenu en dehors du boîte comme ceci:
Et le produit fini ressemble à ceci: Gamme Développement Web
Mettre à jour:
On m'a demandé comment ajouter une bordure. Ici, il est avec une bordure CSS:
Cela fonctionne évidemment, mais la frontière est trop près à mon goût et en ajoutant notre image provoque un rembourrage pour être hors de propos. Voici la solution:
Fondamentalement, nous ajoutons 5 pixels de rembourrage tout autour, repositionnant l'image d'arrière-plan 5px par le haut et à gauche, puis définir l'image d'arrière-plan pour ne pas répéter. Maintenant, notre frontière semble bien:
Gamme Développement Web
Comme une note rapide, si vous utilisez « box-sizing: boîte frontière, » vous devrez régler la largeur et la hauteur de la CSS pour la largeur / hauteur de l'image ainsi que le rembourrage, dans ce cas 470px × 110px.
Cette offre quelques bonnes idées pour une question connexe je l'ai, mais j'ai une suggestion concernant cacher le texte du lien.
Au lieu de déplacer le chemin de texte sur le côté, ou pas du tout, pourquoi ne pas mettre juste la taille de la police à 0px? Je l'ai testé avec Firebug sur cette même page, sur l'étape où vous montrer le texte encore visible sur l'image. Il disparaît très bien, et le lien fonctionne toujours.
Les gens peuvent définir une taille de police minimale dans leur navigateur qui remplacera votre réglage 0px. Dans FireFox, allez dans Préférences -> Contenu -> Avancé et vous verrez que vous pouvez changer la « taille de police minimale ».
Je dois demander à mon code particulier dans WP. Les catégories montrent dans un widget avec le nom de la catégorie ci-dessus l'image de base pour l'article vedette de cette catégorie, suivi d'un extrait en dessous. Je ne dois pas disparaître le texte, mais avez besoin d'avoir une autre image bg pour chacune des catégories, comme il y a trois de ces catégories à travers la page de gauche à droite. Idk maintenant de préciser le code CSS pour le faire. Le code ressemble à ceci pour chaque boîte de catégorie:
et les modifications que pour les données-catid et nom réel.
Comment puis-je cibler simplement ce lien pour cette catégorie il aura une image bg unique? Je sais que ce doit être pour le conteneur du lien, qui semble être juste le h3. En dessous de cette span4 est une liste plus ul articles dans cette catégorie, et rien d'autre. Des idées?
Presque. Voici le code html moins les crochets d'ouverture:
Cela pourrait être un long shot, mais je suis en espérant que vous pouvez me aider! Je suis en train de mettre en œuvre votre technique avec une image d'arrière-plan plein écran ... mais pas de chance. Pouvez-vous jeter un regard à mon code et me dire si / comment il peut être fait?
# Plein écran background-image z-index: -999;
min-height: 100%;
min-width: 1024px;
largeur: 100%;
hauteur: auto;
Position: fixe;
top: 0;
gauche: 0;
>
Merci à l'avance si vous pouvez offrir des solutions! Je travaille sur cette question depuis 2 jours maintenant, en essayant différentes choses que je trouve en ligne, mais rien n'a encore travaillé.
Donc, je suis en train d'obtenir l'image d'arrière-plan cliquable pour avoir 4 liens séparés.
HdrUserControl.acsx fournit les id
Et puis le master.css est la suivante
div div # headerContainer
position: relative;
padding: 10px 0 15px;
>
headerLinks
position: absolute;
droite: 0;
bottom: 15px;
Malheureusement, ce que vous avez besoin va être assez différent de ce que ce tutoriel fait. Regardez briser l'image ou possible de le mettre sur un récipient puis superposant les liens sur le dessus (en utilisant toujours le texte tiret pour masquer le texte des liens)
dit James Meyer: