如何聲明沒有任何內容的鏈接？

我想聲明一個沒有任何內容的鏈接，而是我想爲它使用背景圖片。但只有當我在<a></a>標籤之間放置東西時，我才能看到背景。我該如何解決它？如何聲明沒有任何內容的鏈接？

2010-05-02 armin etemadi

做鏈接一個塊級元素，並給它一個寬度和高度：

a.somelink { 
    display: block; 
    width: 100px; 
    height: 20px; 
    background-image: url(someimage.png) 
}

或者只是使用<a>內部的<img />而不是使用background-image。

來源

2010-05-02 12:14:38

非常感謝你，它有效。但我的桌子正在撕裂！我想要發生在我的原始圖像上（這個背景不同於我的鏈接的背景，這是我想把我的鏈接放在它上面的原始圖像）。我該怎麼做？ – 2010-05-02 12:22:46

@armin那種信息應該在你的問題中，應該在那裏。請更新您的問題並全面瞭解您想要做什麼。 – 2010-05-02 21:25:08

要使用背景圖像，請根據您的要求給它一種display: block;或display: inline-block;的樣式。

示例HTML：

<a href="#" class="ImgLink"></a>

CSS：

a.ImgLink { 
    display: block; 
    background: #FFFFFF url(img.jpg); 
    width: 200px; 
    height: 100px; 
} 
/* Add a hover if you want */ 
a.ImgLink:hover { 
    background: #FFFFFF url(imgHover.jpg); 
}

來源

2010-05-02 12:13:45

非常感謝你，它的工作，但我的桌子撕裂了！我想在我的原始圖像上發生一些事情（這個背景不同於我的鏈接的背景，這是我想把我的鏈接放在它上面的原始圖像）。我該怎麼做？ – 2010-05-02 12:48:56

@armin - 您想要鏈接替換它所在單元格的背景嗎？如果是的話，你使用任何JavaScript框架？ – 2010-05-02 12:52:29

鏈接應始終有文本，無論是直接文本內容還是圖像的alt標記。您可以使用負面的text-indent樣式隱藏視圖中的文字，並將其替換爲圖像。例如：

<a href="page.html" id="important-link">check out my important stuff</a> 

#important-link { 
    background: transparent url(../images/important-stuff.png) no-repeat top left; 
    display: block; /* needed as <a> tag is inline by default */ 
    height: 100px; /* whatever image width is */ 
    text-indent: -9999px; /* moves the text off the screen */ 
    width: 100px; /* whatever image height is */ 
}

這是圖片替換常用的技術，其中需要特定的字體，同時保持易用性（主要是，CSS +無圖像是唯一的條件），並從文本的搜索引擎優化的好處。

來源

2010-05-02 12:23:58 roryf

你已經解僱了我哥們！所以+1 ;-) – 2010-05-02 12:30:05

非常感謝你，它的工作原理。但我的桌子正在撕裂！我想在我的原始圖像上發生一些事情（這個背景不同於我的鏈接的背景，這是我想把我的鏈接放在它上面的原始圖像）。我該怎麼做？ – 2010-05-02 12:48:14

@armin這樣做很有意義，你可以創建一個小測試用例嗎？ – roryf 2010-05-03 23:07:38

最佳實踐和SEO友好CSS文本替換，圖片：

http://css-tricks.com/css-image-replacement/

來源

2010-05-02 12:28:21

這個怎麼樣：

<a href="#>&nbsp;</a>

然後刪除可能的下劃線與下面的CSS：

a.somelink { 
    display: block; 
    text-decoration:none; 
    background-image: url(someimage.png) 
}

來源

2010-05-02 21:23:07

如何聲明沒有任何內容的鏈接？

回答

相關問題