用於圖像超鏈接的CSS圖像疊加

我有一個由圖像組成的菜單和一個：懸停我想添加一個背景圖像，而不是簡單地做圖像替換（全部在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是表示over.png 由於底部約10其圖像的頂部的像素。

添加background-position：x y;仍然只在圖像底部顯示over.png，並將它裁剪爲一個字符的高度。

下面顯示兩個圖像和什麼出來右側 image of what happens http://i37.tinypic.com/2isee69.png

來源

2010-08-11 neil

渴望發佈一些代碼？ – Marko 2010-08-11 00:48:55

如果您明確地將超鏈接的大小設置爲內部圖像的大小，是否還會發生同樣的情況？ – Jacob 2010-08-11 01:25:18

圖像大小相同，但我仍然嘗試過。我插入一張圖片 – neil 2010-08-11 01:36:45

它會更容易，如果你給了我們一個屏幕截圖和一些代碼來進行調試。但它聽起來像你可能只需要使用背景位置將背景圖像放置在元素內。您可以使用像素，百分比或頂部，底部，左側，右側將背景圖像放置到元素內的任何位置。 http://www.w3schools.com/css/pr_background-position.asp。你可能也想看看圖像精靈的翻轉效果。您可以將原始圖像和翻轉圖像放在一個文件上，並簡單地更改懸停時的背景位置。

來源

2010-08-11 00:53:30

據我所見，當我看到之前，背景位置僅適用於只有水平的左，右，中心選項，再加上左邊的像素偏移？這是垂直對齊是錯誤的。 – neil 2010-08-11 01:09:07

對不起，我會換個說法。我試過了，它似乎沒有工作。它仍然將背景圖像鎖定在主圖像的底部。更改背景位置只是調整底部顯示的偏移量。如果這有道理？ – neil 2010-08-11 01:18:36

用於圖像超鏈接的CSS圖像疊加

回答

相關問題