如何將超鏈接添加到背景圖片？

我想添加一個超鏈接到這個背景圖片。我應該在樣式表中創建一個新類嗎？（當我試圖給新班級打電話時，圖像消失了）。如何將超鏈接添加到背景圖片？

body{ 
    background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg'); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    line-height:20px; font-size:14px; 
    font-family:"Trebuchet MS"; 
    margin:0 
}

編輯：（？由新的div類創建）現在有一個在頂部和底部的空白

來源

2010-09-23 pmchrislee

你可以把一切的背後一個div在頁面上給它一個背景圖片，然後在該div上添加一個onclick處理程序。但是你不能超鏈接背景圖片。

你不得不做這樣的事情：

<body> 
    <div id='background' onclick='window.location.href="mynewurl"'> 
     <!-- Rest of page goes here --> 
    </div> 
</body>

此外，添加cursor: pointer到CSS的背景div中的人都知道它是一個鏈接。

來源

2010-09-23 13:09:50 Skilldrick

非常感謝！但是現在頂部底部和頁面菜單本身就有空白區域。 http://thehypebr.com/ – pmchrislee 2010-09-23 13:23:13

不要做''onclick =「window.location.href =」http://boundlessny.com/clothing「」' - 做'「onclick ='window.location.href = 「http://boundlessny.com/clothing'」' - 即在雙引號內嵌套單引號。 – Skilldrick 2010-09-23 13:33:05

加'寬度：100％;' – Skilldrick 2010-09-23 13:33:56

你在body標籤使用background-image。指定一個超鏈接是不可能的。

另外，什麼阻止你在img標記中使用它？這似乎是一個語義上有效的事：

<a href="#"><img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" /></a>

但是，如果你必須使用它作爲背景圖像，比創建一個額外的類是要走的路。

來源

2010-09-23 13:07:04

你將不得不改變你的html代碼來做到這一點。您需要使用標籤環繞圖像，但顯然，您不能對<body>標籤執行此操作。

**編輯**，因爲它指出了我的第一個答案是無效的HTML（感謝和抱歉），你可以使用這樣一個jQuery的方法：

$(document).ready(function(){ 
    $("body").click(function(){ 
     window.location='http://www.yoururl.com'; 
    }); 
});

來源

2010-09-23 13:07:22 TheGeekYouNeed

這是無效的HTML。你不能在錨中嵌入'div' – 2010-09-23 13:08:26

就像Yi說的那樣，你不能用塊標籤包裝塊級元素。這樣做的唯一方法是添加一個點擊處理程序的div，如我的答案。 – Skilldrick 2010-09-23 13:11:40

好吧，我不能告訴你這是否是一個有效的解決方案，因爲我不得不看看你真正想成爲一個鏈接。例如，如果你想在你的背景圖像中創建一個鏈接到「無邊框」的框，我確實有一個解決辦法。讓瀏覽器正確無誤是一件痛苦的事情，但它是可行的。

明確gif文件大小爲你的面霜盒
把這些圖片在這樣的<a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a>
使用CSS使標籤塊元素，並將其放置在背景奶油盒相同圖片

我當然會清理我的代碼，這是一團糟，但我相信你可以弄清楚。只要確保具有可訪問性的描述性alt標籤即可。

這不是最好的解決方案，那就是將背景圖像中的「無邊界」框放在背景圖像上，而不是空白的gif，但如果您因爲某種原因需要這樣做，選項將起作用。

來源

2010-09-23 14:04:03 Nicknameless

設置onClick方法的問題在於您刪除瀏覽器窗口左下角的錨點提示以及可能與鏈接關聯的任何搜索引擎優化。

你可以只用HTML/CSS實現這一點：

<style> 
    .background-div { 
    background-image:url("/path/to/image.jpg"); 
    position:relative; 
    } 
    .href:after { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    content:""; 
    } 
</style> 
<body> 
    <div class="background-div"> 
    <a href="https://stackoverflow.com/a/url" class="href"></a> 
    </div> 
</body>

在這種情況下，在背景格的相對位置將保持包含僅該div的鏈接，並通過添加僞元素到鏈接，您可以自由地向鏈接添加文本（如有必要），同時將點擊半徑擴展到整個背景div。

來源

2017-08-29 21:16:25 Lucas

如何將超鏈接添加到背景圖片？

回答

相關問題