close
Web Standards Solutions 網頁設計標準規格
圖片置換
應該如何以CSS把文字換成圖片?
沒有完美的解決方案
能用,但是要小心
方法A:Fahrner圖片置換(FIR:Fahrner Image Replacement)
以CSS的background或background-image屬性把文字換成圖片
<h1 id="fir">Fahrner Image Replacement</h1>
額外標籤
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>
#fir{
width: 287px;
height: 29px;
background: url(fir.gif) no-repeat; /*指定背景*/
}
#fir span{
display: none; /*隱藏文字*/
}
優點:不支援CSS的看到文字,支援的看到圖片
缺點:螢幕朗讀程式可能會遇到問題、必須加一組無意義的<span>、關閉瀏覽器顯示圖片功能,又支援部份CSS時,可能文字與圖片會皆空
方法B:Leahy/Langridge圖片置換(LIR)
Seamus Leahy(http://www.moronicbajbus.com/playground/cssplay/image-replacement/)
Stuart Langridge(http://www.kryogenix.org/code/browser/lir/)
<h1 id="lir">Leahy/Langridge Image Replacement</h1>
#lir{
padding: 90px 0 0 0;
overflow: hidden;
background: url(lir.gif) no-repeat;
height: 0px !important; /*給大多數瀏覽器*/
height /**/: 90px; /*給IE5用*/
}
優點:不用<span>、螢幕朗讀可行
缺點:關閉瀏覽器顯示圖片功能,又支援部份CSS時,可能文字與圖片會皆空、外框模型補丁
方法C:Phark法
Mike Rundle(http://phark.typepad.com/phark/2003/08/accessible_imag.html)
<h1 id="phark">The Phark Method</h1>
#phark{
height: 26px;
text-indent: -5000px;
background: url(phark.gif) no-repeat;
}
Revised Image Replacement(http://www.mezzoblue.com/tests/revised-image-replacement/)
更多技巧
置換商標
首頁
<div id="logo">
<span><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /></span>
</div>
其它頁面
<div id="logo">
<span><a href="/"><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /></a></span>
</div>
一對商標
lo-fi:未使用樣式的頁面裡顯示於行內的版本
hi-fi:現代瀏覽器之內被CSS引用
首頁CSS
#logo img{
display: block;
width: 0; /*將圖片隱藏*/
}
#logo span{
width: 173px;
height: 31px;
background: url(../images/logo_corn.gif) no-repeat;
}
其它頁面CSS
#logo a{
border-style: none;
display: block;
width: 173px;
}
圖片標籤輪轉效果
Petr Stanicek:Fast Rollovers, No Preload Needed(http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/)
Leahy/Langridge圖片置換法
標記原始碼
<ul id="nav">
<li id="thome"><a href="/" class="selected">Home</a></li>
<li id="tguides"><a href="/guides">Guides</a></li>
<li id="tmag"><a href="/magazine">Magazine</a></li>
<li id="tarchives"><a href="/articles">Archives</a></li>
</ul>
一張圖片,三種狀態
普通狀態、滑鼠移動狀態、啟動狀態
#nav{
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li{
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a{
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/: 20px;
}
#nav a:hover{
background-position: 0 -20px;
}
#nav a:active, #nav a.selected{
background-position: 0 -40px;
}
#thome a{
width: 40px;
background: url(home.gif) top left no-repeat;
}
http://www.simplebits.com/bits/tab_rollovers.html
全站熱搜
留言列表