你可以做一個鏈接的CSS <header>元素？

我有一個網站有一個<header>這是風格，使標題圖形是background-image。我希望將標題鏈接到主頁。你可以做一個鏈接的CSS <header>元素？

有一種優雅的方式來做到這一點，讓我保持它作爲一個background-image頭？

CSS：

#header { 
    background-image: url('../images/header.jpg'); 
    height: 144px; 
    display: block; 
}

來源

2013-03-13 Matt Brand

您也可以看看下面的鏈接查看詳細： HTTP： //stackoverflow.com/questions/1685078/how-do-you-make-a-div-tag-into-a-link – user1376261 2013-03-13 13:44:01

背景圖像不聯。「適當」的方式去做這件事將是有一個<a>元素有適當的href，並把background-image。使用CSS使<a>達到所需的空間。

來源

2013-03-13 13:39:20 hexblot

好吧，明白了。謝謝！ – 2013-03-13 13:43:10

@MattBrand另外，請記住應用display：block;到錨標記，以便它成爲塊級元素而不是內聯（以便佔用設置寬度/高度的空間）。 – InsomniaBass 2013-03-13 13:47:50

@MattBrand - 如果此解決方案適合您，請通過單擊答案旁邊的複選標記將其標記爲接受的解決方案。 – Shauna 2013-03-13 13:49:22

錨點現在是HTML5中的塊元素，因此它們可以包裝塊元素，如h1,p和div。他們都沒有，但是，這意味着包裝header，article，nav，section等

您可以使用JavaScript來分配onClick事件的頭元素，如果你沒有訪問標記或CSS，但中課程需要JavaScript才能工作。

取而代之，您需要將header的內容與a包裝起來，並將其指定爲href到您的主頁。然後，您可以使用背景圖像和其他CSS對鏈接進行樣式設置（確保將其設置爲display: block）。

來源

2013-03-13 13:47:03

「但是，他們不是要包裝標題，文章，導航，部分等。」 - 需要引用。 – Alohci 2013-03-13 16:24:58

那麼它沒有理由不能包裝，但我還沒有遇到任何開發人員...... – 2013-03-14 16:44:33

你的問題是指<header>元素，但CSS代碼使用類選擇#header。從技術上講，你可能有<header class=header>，但這將是毫無意義的，#header表明實際標記有<div class=header>。

只要考慮到實際的瀏覽器行爲，元素和<div>元素都可以放置在元素內。傳統上，HTML規範不允許使用這種構造，但HTML5 CR允許在<a>內的任何「流內容」。

如果標題實際上只是一個圖像（作爲背景圖像），那麼使用僅僅一個a元素並在其上直接設置背景圖像似乎更自然。但是，這會降低可訪問性，因爲無法爲背景圖像指定替代文本，因此，在禁用圖像加載的情況下對讀者和瀏覽器進行屏幕顯示時，會出現鏈接無內容且無鏈接文本。因此，如果標題應該是鏈接，則最好使用內容圖像，例如

<header> 
<a href="./"><img src=hdr.png alt="ACME Company" border=0></a> 
</header>

（然而，內容圖像強制最小頁面寬度圖像的寬度，這並不總是可取的，但是這是一個不同的故事，不同的問題。）

來源

2013-03-13 14:40:05

我不喜歡這樣當使用單獨的樣式表時。

原始的css頭標記

<div id="header"> 

    </div>

增加跨度，使標題的鏈接

<span><a href="http://www.yourwebsitename.com/"> 
    <div id="header"> 

    </div></a></span>

來源

2014-03-05 17:21:47

你可以做一個鏈接的CSS <header>元素？

回答

相關問題