鏈接與背景圖片

我有一些10個按鈕，每個圖片文字和懸停狀態。我想要做的是使用background-position，width和height來僅顯示背景圖像精靈的部分和懸停的背景位置來顯示懸停樣式。我還會在元素上使用圖像替換類，以便它保持可訪問性和可索引性。鏈接與背景圖片

所以（三圍是隨機的）：

[CSS]

.menu{background-image:url(path/to/sprite.png);} 
.button-1{width:200px;height:30px;background-position:0 0;} 
.button-1:hover{background-position:0 -30px;} 
.button-2{width:250px;height:30px;background-position:100px 0;} 
.button-2:hover{background-position:100px -30px;} 
/* Image Replacement Class (H5BP, @necolas && BEM) */ 
.ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent;}

[HTML]

<a href="someLink.html" class="menu button-1 ir">Button 1</a> 
<a href="someOtherLink.html" class="menu button-2 ir">Button 2</a>

我想知道的是，如果這是這樣做的好辦法或者應該以不同的方式完成，如：

<a href="someLink.html"><img src="image.png" width="200" height="30" alt="Button 1"/></a>

然後用JavaScript在懸停上交換圖像。

在可訪問性和機器人方面，兩者有任何區別嗎？

謝謝。

來源

2012-03-26 Francisc

我看不錯。我唯一要做的就是重新審視這個設計，看看你是否可以逃避文本作爲HTML來維護。 – chipcullen 2012-03-26 14:53:18

嘿。文本保持爲HTML的含義是什麼？ – Francisc 2012-03-26 14:57:18

我的意思是儘量不要用圖像替換文本，即使它們是用CSS應用的背景圖像。我不知道你的圖片替換的原因 - 我只是儘量避免它不惜一切代價。維護是一個痛苦。 – chipcullen 2012-03-26 16:45:41

你在做什麼是正確的。不要忘了添加一個display: block;到該鏈接。你可以做的其他事情是將實際的鏈接文本放在一個範圍內，然後將該範圍絕對定位在屏幕外。像這樣：

<a href="" title="Test link"><span>Home page</span></a>

而且在你的CSS文件：

a > span {position: absolute; top: -10000px;}

來源

2012-03-26 14:51:45

考慮使用'text-indent：-100000px'而不是向標記添加額外的跨度。 – shaunsantacruz 2012-03-26 14:56:02

謝謝。我通常會嘗試添加儘可能少的額外標記。 '.ir'類負責隱藏文本，所以我不需要設置負面文本縮進。 – Francisc 2012-03-26 14:58:38

@alpacalips這確實是另一種可以節省額外標記的可能性。但請注意，我們的兩種技術都不被視爲搜索引擎的「合法」，因爲它們被垃圾郵件製造者廣泛使用。閱讀更多關於它的地方：http://luigimontanez.com/2010/stop-using-text-indent-css-trick/ Francisc：如果這是一個令人滿意的答案，請標記爲正確。 – 2012-03-26 16:01:54

鏈接與背景圖片

回答

相關問題