如何使用html在標題圖像上創建可點擊的按鈕？

Question

我想知道如何創建一個HTML格式的可點擊的按鈕，位於標題圖片的中心。

我試圖將按鈕標籤和href屬性一起使用以及img標籤來試圖圍繞期望的圖像包裝代碼，但它不起作用。我試圖實現的結果示例可以在github.com的標題中找到。

Answer 1

我不確定你是否想要一個按鈕集中在標題圖片上，或者是否有一個圖片想要作爲按鈕的一部分進行設置。 （爲了清晰起見，請張貼屏幕截圖，或許？）這是前者的片段。

.header { 
 
    background-image: url('http://lorempixel.com/640/200/'); 
 
    width: 640px; 
 
    height: 200px; 
 
    text-align: center; 
 
} 
 

 
.header button { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<header class="header"> 
 
    <button onclick="alert('You clicked me!');" id="myButton">Click me!</button> 
 
</header>

Answer 2

您好一封歡迎的SO！

首先，你應該總是發佈一些代碼，所以我們可以看到你已經嘗試了一些東西。

我試圖實現可以在頭中發現github.com

一個簡單的方式來看待它的體形是如何通過使用一些提供的開發工具，以檢查此元素的代碼在您的瀏覽器（，但是請不要IE）

如果你是新的HTML你也應該儘量遵循一些教程，看了一些必要的文件（可以發現here），並確保你不想錯過花哨的CSS的東西，所以你也應該檢查this出來。

現在你的問題

什麼GitHub上使用這個「按鈕」是一種<a>標籤，具有<span>標籤中，它使用一個Octocat圖標，字體。

DEMO

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
body { 
 
    font-size: 16px; 
 
} 
 
.icon { 
 
    font-size: 3em; 
 
}

<a href="https://google.com" target="_blank" class="icon"> 
 
    <span class="glyphicon glyphicon-star"></span> 
 
</a>

Answer 3

你基本上要使用一個div結構與背景圖像，給它一個明確的寬度和高度，並設置其位置relative。然後，您可以將按鈕置於div的內部。有幾種方法可以做到這一點。

這裏是一個fiddle example