一個(gè)新的CSS圖片替換的技巧(背景顯示與文本移離屏)告別9999px
發(fā)布時(shí)間：2012-12-30 14:22:18 作者：佚名 
我要評(píng)論
我要評(píng)論-9999 px的形象替代技術(shù)已經(jīng)流行了一個(gè)十年最好的部分。一項(xiàng)新技術(shù)已被發(fā)現(xiàn),可以提高性能,因?yàn)闉g覽器的不再畫(huà)一個(gè)9999 px箱在幕后
-9999 px的形象替代技術(shù)已經(jīng)流行了一個(gè)十年最好的部分。替換一個(gè)文本元素和一個(gè)圖像,您可以使用下面的代碼:
<h1>This Text is Replaced</h1>
<style>
h1
{
background: url("myimage") 0 0 no-repeat;
text-indent: -9999px;
}
</style>
元素的背景顯示和它的文本移離屏,這樣它就不會(huì)妨礙。簡(jiǎn)單的和有效的。它常常被采用來(lái)顯示圖形標(biāo)題——這是很少有必要現(xiàn)在我們有webfonts,但你還是會(huì)覺(jué)得它使用web。
直到現(xiàn)在。
一項(xiàng)新技術(shù)已被發(fā)現(xiàn):
{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
代碼縮進(jìn)文本超越其容器的寬度,但它不會(huì)包裝和溢出是隱藏的。
雖然這是一個(gè)小更長(zhǎng)和更難以記住,可以提高性能,因?yàn)闉g覽器的不再畫(huà)一個(gè)9999 px箱在幕后。它還將防止怪異的左擴(kuò)展概述了你會(huì)看到鏈接周?chē)氖褂秒[藏文本。
復(fù)制代碼
代碼如下:<h1>This Text is Replaced</h1>
<style>
h1
{
background: url("myimage") 0 0 no-repeat;
text-indent: -9999px;
}
</style>
元素的背景顯示和它的文本移離屏,這樣它就不會(huì)妨礙。簡(jiǎn)單的和有效的。它常常被采用來(lái)顯示圖形標(biāo)題——這是很少有必要現(xiàn)在我們有webfonts,但你還是會(huì)覺(jué)得它使用web。
直到現(xiàn)在。
一項(xiàng)新技術(shù)已被發(fā)現(xiàn):
復(fù)制代碼
代碼如下:{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
代碼縮進(jìn)文本超越其容器的寬度,但它不會(huì)包裝和溢出是隱藏的。
雖然這是一個(gè)小更長(zhǎng)和更難以記住,可以提高性能,因?yàn)闉g覽器的不再畫(huà)一個(gè)9999 px箱在幕后。它還將防止怪異的左擴(kuò)展概述了你會(huì)看到鏈接周?chē)氖褂秒[藏文本。
相關(guān)文章
css圖片垂直居中 css中如何實(shí)現(xiàn)圖片垂直居中
使用純CSS實(shí)現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中，下面是一個(gè)權(quán)衡的相對(duì)結(jié)構(gòu)干凈，CSS簡(jiǎn)單的解決方法2013-04-17css圖片縮放 通過(guò)css控制圖片自動(dòng)縮放至css定義大小
瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)碰到圖文并茂的文章,如果圖片的尺寸過(guò)大，常會(huì)把頁(yè)面結(jié)構(gòu)撐得變形直接影響了界面美觀度，一直用DIV+CSS的方式來(lái)制作頁(yè)面，發(fā)現(xiàn)用CSS來(lái)得更方便，相信處理2013-03-28- 無(wú)需flash，完全用css就可以做出超炫的圖片倒影效果,大伙不要不信；網(wǎng)上流傳很多種版本，經(jīng)過(guò)本人的一番研究，做成能夠兼容firefox、chrome、IE等各主流瀏覽器的版本，跟大2012-12-27
純CSS圖片預(yù)加載實(shí)例 擺脫Javascript預(yù)載的束縛
有很多種方法來(lái)實(shí)現(xiàn)圖片的預(yù)加載，通常大部分使用Javascript讓事情滾動(dòng)。不要再受Javascript預(yù)載的束縛了吧，用CSS你就可以毫不麻煩的預(yù)載你的圖片,需要的朋友可以了解下2012-12-19css實(shí)現(xiàn)圖片圓角 兼容所有瀏覽器實(shí)現(xiàn)代碼
今天處理了一個(gè)頁(yè)面刷新隨機(jī)顯示圖片的功能，發(fā)現(xiàn)直角太丑，想實(shí)現(xiàn)圖片圓角，兼容所有瀏覽器,于是網(wǎng)上搜集整理了一下，拿出來(lái)和大家分享2012-12-06CSS圖片垂直居中方法整理集合 ！(常見(jiàn)問(wèn)題解答)
看到問(wèn)此問(wèn)題的很多，所以花點(diǎn)時(shí)間整理下，歡迎大家提意見(jiàn)，做補(bǔ)充修改，謝謝2012-01-21- CSS圖片垂直居中問(wèn)題，困擾了我許久，今天終于可以總結(jié)下來(lái)了2012-01-21
CSS圖片提取工具綠色免費(fèi)版 v1.00 [已測(cè)]
CSS圖片提取工具，是我為了方便制作網(wǎng)站而編寫(xiě)的一個(gè)小巧的工具。它功能單一，但可以省去不少的麻煩2011-10-09
華華CSS圖片下載器是款圖片下載小工具，支持用戶(hù)將圖片下載自動(dòng)保存到本地電腦中，進(jìn)行編輯使用，高效的提高辦公效率，歡迎需要的朋友下載使用2025-09-28
動(dòng)畫(huà)效果的CSS3圖片導(dǎo)航菜單特效代碼
動(dòng)畫(huà)效果的CSS圖片導(dǎo)航菜單特效，鼠標(biāo)放到圖片上，會(huì)出現(xiàn)菜單提示，因?yàn)槭怯肅SS實(shí)現(xiàn)的動(dòng)畫(huà)效果，所以流暢度當(dāng)然沒(méi)有JavaScript和Flash的效果好，僅供參考。2010-11-18
