鏈接背景圖片

我想鏈接我的背景圖片使用教程在http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/#comment-28009但它只是不適合我。鏈接背景圖片

我認爲我有正確的CSS，但是當我插入html來建立鏈接時，它將我的整個網站設置爲一個巨型鏈接。有沒有辦法讓我的內容後面的鏈接層，所以它只能在容器的兩側點擊？

body { 
    background-image: url('images/bg.png'); 
    background-position: center top; 
    background-attachment: fixed; 
    } 

body #background-link { 
position: absolute; 
height:11000px; 
text-indent:-9999px; 
width:1440px; 
top: 0; left: 0; 
border: 0; 
float: left; 
}

和這個網站：

<a href="http://url.com" title="Title" id="background-link">the link</a>

來源

2011-04-17 Jen

僅供參考 - 這不是爲了使整個網站的背景成爲一個鏈接，而是用於網站內的單個圖像背景。它應該工作，如果你使用下面的代碼，但。 – 2011-04-17 15:23:01

您需要設置站點的容器的z-index，使其高於

我已經使用這個CSS嘗試錨鏈接。最簡單的方法來做到這一點 -

添加這個CSS：

#wrapper{position:relative;z-index:10;} 
#background-link{z-index:1}

這是HTML：

<a href="http://url.com" title="Title" id="background-link">the link</a> 
<div id="wrapper"> 
    all of your site code goes here 
</div>

來源

2011-04-17 15:20:34

的position:absolute讓你鏈接留在前面。你可以嘗試z-index，但是如果我能看到你是完整的代碼則更容易分辨？或者頁面鏈接？

來源

2011-04-17 15:21:55 Jafu

http://PromMafia.com – Jen 2011-04-17 19:03:39

' body { \t background-image：url（'images/bg.png'）; \t background-position：center top; \t background-attachment：fixed; } body＃background-link { \t position：absolute; \t height：11000px; \t text-indent：-9999px; \t width：1440px; \t top：0;左：0; \t border：0; \t float：left; } H1 {字體大小：18pt;} H2 {字體大小：14pt;} H3 {字體大小：10PT;} H4 {字體大小：9pt的;} /*容器*/ ＃容器{ \t width：971px; \t margin：0 auto; \t padding：0; \t背景：#FFFFFF; \t顏色：#FFFFFF; \t溢出：隱藏; \t background：url（images/notebookbg.gif）top center repeat-y scroll; }' – Jen 2011-04-17 19:20:40

你能不能也確切地告訴我你想要什麼？爲什麼你需要這個鏈接呢？嘗試在鏈接上設置z-index：-1，並且位置：絕對。那是你要的嗎？ – Jafu 2011-04-17 19:22:49

鏈接背景圖片

回答

相關問題