使用H1圖像替換的語義標識...不會留下任何點擊？

Question

我正在爲左上角有一個大公司徽標的網站編碼。

因此，我使用徽標作爲背景圖像，公司名稱在H1中編碼，並使用圖像替換技術隱藏H1。

但是網站的其他部分沒有「主頁」鏈接。該徽標可能旨在成爲「主頁」鏈接。但由於語義/圖像替換技術，沒有什麼可點擊的。

你會在這種情況下做什麼？在商標上放置透明的東西是我的第一個想法，但我想聽聽其他建議。

Answer 1

非常簡單 - 在你的H1元素中放入<a href="/home">Company name</a>，並將圖像替換樣式應用到h1#logo a（或任何你使用的選擇器）。您需要將display:block;添加到樣式中，以確保錨點的行爲正確。

讓我知道你是否需要比這更多的細節！

額外的細節：

行 - 我通常使用下面的HTML和CSS圖片替換：

HTML：

<h1 id="logo"> 
    <a href="/home" title="Back to the home page">[Company name]</a> 
</h1> 

CSS

#logo a { 
    display:block; 
    width: 200px; /* Or whatever you like */ 
    height: 0; 
    padding-top: 100px; /* The required height */ 
    text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */ 
    overflow: hidden; 
    background: /*whatever you like */; 
} 

這是一種「雙倍強度」 - 高度：0/padding-top技術創建一個您需要的大小的框，但沒有任何文字顯示空間（背景圖像將顯示在頂部填充中，但文字不會）。大的負面文本縮進只是瀏覽器的安全問題，偶爾會出現問題（舊的webkit曾經有問題 - 現在沒什麼問題）。

讓我知道你走了！