css背景图片替换文字

有些标题用到背景图片的时候,为了seo需要,就多加了一层不显示的文字标题,这个时候需要在标题加上text-indent:-9999px,这样达到了文字就不显示的效果。

最近看到一个最新的方法

<a class="hide-text mylogo" target="_blank" href="http://ciaoca.com">ciaoca</a>

.hide-text{ 
    overflow:hidden; 
    text-indent:100%; 
    white-space:nowrap; 
} 
.mylogo{ 
    display:block; 
    width:88px; 
    height:31px; 
    background:url(img/logo.jpg) no-repeat; 
}

这样做的好处是优化了性能,因为text-indent:-9999px浏览器需要绘制一个 9999px 的画面比较消耗性能

posted @ 2014-06-10 15:59  vzone  阅读(274)  评论(0)    收藏  举报