如何讓圖像超鏈接具有背景圖像？

我希望所有的.jpg鏈接都有一定的背景圖片。所以像'http://mysite/myimage.jpg'這樣的頁面上的鏈接會自動加上一個小圖標作爲前綴。其實所有的圖像鏈接，即.gif .png以及相同的圖標。如果鏈接是網站，即.htm/.php/.html/.asp，它應該有不同的圖像。我希望它通過CSS中的類。任何幫助讚賞。 TIA如何讓圖像超鏈接具有背景圖像？

來源

2010-04-24 Richard

我認爲這應該工作，它使用CSS3屬性選擇的，所以瀏覽器實現變化很大：

a[href$='png'], 
a[href$='gif'] {/* styles */}

基本上選擇href屬性以（$=部分）文件類型擴展名'png'或'gif'（顯然其他文件類型同樣可能）結尾的所有鏈接。

參考，並進一步的細節在：http://www.css3.info/preview/attribute-selectors/

編輯：

所以，如果我想爲剛纔的YouTube鏈接一個特殊的背景圖片，我會用a[href$='youtube'] {/* styles */}

不，如果你只是想讓它用於YouTube鏈接，你可以使用：

a[href*=youtube] { /* css */ }

的*=是相當於「包含」，雖然你可以使用：

a[href^=http://www.youtube.com] { /* css */ }

來源

2010-04-24 19:39:46

感謝您的答覆，兩者。是的，實際上我想要鏈接到圖像的所有鏈接，並且此代碼 a [href $ ='gif'] {/ * styles * /} 完美地工作。我以前看過，但語法錯了，並沒有奏效。因此，如果我想爲youtube鏈接製作一個特殊的BG圖像，我會使用 a[href$='youtube'] {/* styles */} – Richard 2010-04-29 12:09:08

謝謝ricebowl，我跟着你的參考資料，挖了一些[href^= http：//example.com] { 紅色; }在http://css-tricks.com/attribute-selectors/上找到，與上面的示例相同。非常感謝你們的幫助，我只需要知道要尋找什麼。你教我如何釣魚！這是值得的 – Richard 2010-04-29 19:50:23

您可以使用CSS選擇器+後臺URL屬性來完成此操作。例如，包括與錨標籤內的所有IMG標籤的圖標：

A IMG { background: url("/icon.png") no-repeat scroll; }

來源

2010-04-24 19:35:58 Bosh

我想他的意思是鏈接*至*的圖像，而不是*所有鏈接包含所有鏈接*一張圖片（但我以前錯了，所以你可能是對的）。 – 2010-04-24 19:41:32

如何讓圖像超鏈接具有背景圖像？

回答

相關問題