一個(gè)新的CSS圖片替換的技巧(背景顯示與文本移離屏)告別9999px
發(fā)布時(shí)間:2012-12-30 14:22:18 作者:佚名
我要評(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圖片下載器 v1.1 網(wǎng)站必備的小工具
如今DIV+CSS的網(wǎng)站設(shè)計(jì)成為主流,越來(lái)越的圖片不直接插在HTML中而選擇用CSS來(lái)展示了,這為仿站帶來(lái)很大的困難。2011-09-20動(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