Superposition d'image CSS pour les hyperliens image

J'ai un menu composé d'images et sur un: hover Je veux ajouter une image d'arrière-plan plutôt que de simplement faire des remplacements d'image (tout en CSS, pas de JavaScript).Superposition d'image CSS pour les hyperliens image

Cependant, si je change simplement l'image d'arrière-plan, alors que la transparence et l'alignement horizontal sont bons, c'est juste au mauvais placement vertical. Peu importe ce que j'essaie, l'image d'arrière-plan va tout en bas de l'image et vous voyez une hauteur de texte de l'image de fond en dessous de l'image du menu principal.

Des idées pour résoudre ce problème?

Dans sa forme la plus simple, il peut être répété comme suit:

<html> 
<head> 
<style>a:hover{background:url('over.png');}</style> 
</head> 
<body> 
    <a href="#"><img src="item.png" style="border:0; " /></a> 
</body> 
</html>

item.png est montrant environ 10 pixels de haut de son image au bas de over.png Merci.

Ajout de la position d'arrière-plan: x y; montre seulement le over.png au bas de l'image et le recadre à la hauteur d'un caractère.

ci-dessous montre les deux images et ce qui sort sur le droit image of what happens http://i37.tinypic.com/2isee69.png

Source

2010-08-11 neil

Envie de poster un code? – Marko

Est-ce que la même chose se produit toujours si vous définissez explicitement la taille de votre lien hypertexte à la taille de l'image à l'intérieur? – Jacob

les images sont de la même taille, mais j'ai essayé quand même. J'ai inséré une image – neil

Il serait plus facile de déboguer si vous nous avez donné une capture d'écran et un code. Mais il semble que vous ayez juste besoin de positionner l'image d'arrière-plan dans l'élément en utilisant la position d'arrière-plan. Vous pouvez utiliser des pixels, des pourcentages ou simplement le haut, le bas, la gauche ou la droite pour placer une image d'arrière-plan où vous le souhaitez dans un élément. http://www.w3schools.com/css/pr_background-position.asp. Vous pouvez également rechercher dans les images-objets d'image pour les effets de survol. Vous placez les images d'origine et de survol sur un seul fichier et modifiez simplement la position de l'arrière-plan sur le vol stationnaire.

Source

2010-08-11 00:53:30

autant que je pouvais voir quand j'ai regardé avant la position de fond est seulement pour horizontale ayant gauche, droite, centre des options seulement, plus un décalage de pixels de la gauche? C'est l'alignement vertical qui est faux. – neil

Désolé, je vais reformuler cela. J'ai essayé ça, ça n'a pas l'air de marcher. Il verrouille toujours l'image d'arrière-plan au bas de l'image principale. Changer la position d'arrière-plan ajuste simplement le décalage de ce qui est affiché en bas. Si ça a du sens? – neil

Superposition d'image CSS pour les hyperliens image

Répondre

Questions connexes