tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab"><a href="http://www.yahoo.com">English</a></div>
以上腳本的問題是,一個鏈接不會在所有的工作。如果用戶點擊16by16.png圖片,用戶不會重定向到yahoo.com。CSS - 如何讓一個DIV中的一個連接工作與背景圖像
但是要解決這個問題?
謝謝
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
它爲我原來的問題。但是,顯示的圖像現在偏移到水平菜單的底部。這是由'display:block'造成的。但是,如果我刪除'display:block',那麼圖像將不可見。
謝謝
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
然而,這個建議確實有一個問題。文字「英文」與圖像混合。我無法弄清楚如何從鏈接中刪除「英文」文本。
通過添加下面的額外規則將導致圖像消失。
#tab-ver.tab {
text-indent: -10000em;
}
有什麼想法嗎?
你好MainMa,我應該在哪裏放這個IMG?謝謝 – q0987 2010-09-08 02:10:46
他們不是'黑客'的任何定義的單詞 - 圖像替換是一個有效的技術,是跨瀏覽器兼容和廣泛使用 – 2010-09-08 02:15:40
你好MainMa,請檢查這個圖像http://i52.tinypic.com/245hax1 .png正如你所看到的,當鼠標懸停在圖像上時,會出現白色背景。你知道如何解決這個問題嗎?謝謝 – q0987 2010-09-08 02:17:07