У меня есть меню, состоящее из изображений, и на: hover я хочу добавить фоновое изображение, а не просто заменять изображения (все в CSS, без JavaScript).
Однако, если я просто изменю фоновое изображение, хотя прозрачность и горизонтальное выравнивание в порядке, это просто неправильное вертикальное размещение. Независимо от того, что я пытаюсь сделать, фоновое изображение попадает в самый низ изображения, и вы видите высоту текста фонового изображения под изображением главного меню.
Есть идеи как это исправить?
В простейшем виде его можно повторить следующим образом:
<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 показывает около 10 пикселей верхней части изображения в нижней части over.png.
Благодаря.
Добавление background-position: x y; по-прежнему показывает только over.png внизу изображения и обрезает его до высоты одного символа.
Ниже показаны два изображения и то, что выходит справа
изображение того, что происходит http://i37.tinypic.com/2isee69.png