HTML：網頁背景圖片鏈接無法正常工作，由於包裝器

我有body標籤內的全面的背景圖像的HTML頁面，然後包裝： <body> <a href="#" id="bkimage">Background Image</a> <wrapper> .................HTML：網頁背景圖片鏈接無法正常工作，由於包裝器

樣式：

#bkimage { 
position: fixed; 
background: url('images/bk.jpg') no-repeat top center; 
width: 100%; 
height: 1240px; 
z-index: -1; 
display:block; 
overflow:hidden; 
text-indent:100%; 
white-space:nowrap; 
} 
#wrapper { 
margin: 0 auto; 
width: 960px; 
background: url('images/transpBlack25.png');

}

這個想法是使背景圖像可點擊。但是我們需要在#wrapper中保留網頁的完整內容。 body和wrapper標籤已經有其他背景圖片。

此方法不起作用。我想這可能是因爲包裝具有「margin：0 auto」屬性？但我不確定。

這個問題有一個簡單的解決方法嗎？請幫忙...

來源

2012-07-26 Shadez

Sooo究竟是什麼問題？到目前爲止，我知道你想要背景圖片是可點擊的，並且你想要在#wrapper裏面有東西。究竟發生了什麼問題？ – jeschafe 2012-07-26 18:05:11

該鏈接不可點擊，因爲z-index:-1將其設置在頁面上的所有其他元素之後。如果背景中有東西，並且前面有其他東西，則所有指向背景元素的點擊都將最終落在直接位於其前面的元素上。如果你想讓整個頁面像一個巨大的鏈接一樣行事，你可以將所有內容都包含在錨標籤中。

<style> 
#bkimage { 
    position: fixed; 
    top:0; 
    left:0; 
    background: url('images/bk.jpg') no-repeat top center; 
    width: 100%; 
    height: 1240px; 
    display:block; 
} 
#wrapper { 
    margin: 0 auto; 
    width: 960px; 
    background: url('images/transpBlack25.png'); 
} 
</style> 

<body> 
    <a href="" id="bkimage"> 
    <div id="wrapper">content</div> 
    </a> 
</body>

來源

2012-07-26 18:24:04

HTML：網頁背景圖片鏈接無法正常工作，由於包裝器

回答

相關問題