Наложение изображений CSS для гиперссылок изображений

У меня есть меню, состоящее из изображений и на: hover Я хочу добавить фоновое изображение, а не просто делать замены изображений (все в CSS, без JavaScript).Наложение изображений CSS для гиперссылок изображений

Однако, если я просто изменяю фоновое изображение, тогда как прозрачность и горизонтальное выравнивание в порядке, это просто неправильное вертикальное размещение. Независимо от того, что я пробовал, фоновое изображение идет в самую нижнюю часть изображения, и вы видите о высоте текста фонового изображения под изображением главного меню.

Любые идеи о том, как исправить это?

в его простейшей форме она может быть повторен следующим образом:

<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 спасибо.

Добавить положение фона: x y; все еще только показывает over.png в нижней части изображения и выдает его на высоту одного символа.

Ниже показаны два изображения и то, что выходит на правой image of what happens http://i37.tinypic.com/2isee69.png

источник

2010-08-11 neil

Умеет размещать код? – Marko

Выполняется ли то же самое, если вы явно задали размер вашей гиперссылки на размер изображения внутри? – Jacob

изображения одного размера, но я все равно пытался. Я вставил изображение – neil

Было бы проще отлаживать, если вы дали нам скриншот и код. Но похоже, что вам просто нужно поместить фоновое изображение в элемент, используя background-position. Вы можете использовать пиксели, проценты или просто верхний, нижний, левый, правый, чтобы разместить фоновое изображение, где бы вы ни находились, внутри элемента. http://www.w3schools.com/css/pr_background-position.asp. Вы также можете просмотреть спрайты изображений для эффектов опрокидывания. Вы помещаете оригинальные и опрокидывающиеся изображения в один файл и просто меняете положение фона при наведении.

источник

2010-08-11 00:53:30

, насколько я мог видеть, когда я посмотрел, прежде чем фоновая позиция будет только для горизонтальной, имея только левый, правый, центральный варианты, плюс смещение пикселя слева? Это неправильное вертикальное выравнивание. – neil

Извините, я это перефразирую. Я попробовал это, похоже, это не сработало. Он по-прежнему фиксирует фоновое изображение в нижней части основного изображения. Изменение фонового положения просто регулирует смещение того, что показано внизу. Если это имеет смысл? – neil

Наложение изображений CSS для гиперссылок изображений

ответ

Смежные вопросы