在CSS中如何以圖代字,找了一下CSS隱藏文字的方法,有以下幾條:
1、display: none;
這個(gè)大家普遍說(shuō)法是,搜索引擎可能認為被隱藏的文字屬于垃圾信息而被忽略,不為隱藏的對象保留物理占位空間。GG也搜CSS文件?不過(guò)如果用這個(gè)方法,如何設計,也是難題。
2、visibility: hidden;
和display:none; 相對應,為隱藏的對象保留物理占位空間。
3、overflow: hidden;
這是網(wǎng)上用的最多的方法,但是我認為對于隱藏h1標簽的“站點(diǎn)名稱(chēng)”文字,不太合適,原因我在最后說(shuō)。
.texthidden {
display: block;
overflow: hidden;
width: 0;
height: 0;
}
4、positon: absolute;
用絕對定位將其推出可視區,不過(guò)雖然可視性不存在,但仍占據物理空間,與隱藏文字的宗旨相背,另外我個(gè)人不喜歡用絕對坐標定位magin這個(gè)屬性,margin在不同瀏覽器中總是帶來(lái)不可預料的Bug。
.texthidden {
positon: absolute;
margin-top: -9999px;
margin-left:- 9999px;
}
5、text-indent: -9999px;
把 h1作為一個(gè)塊來(lái)顯示(display:block;),指定長(cháng)寬(和圖片一樣大?。?,然后指定h1的背景圖片,也就是將我們需要的圖片作為h1這個(gè)標簽的背景。而h1標簽中插入的,仍然是作為字符形式出現的博客標題,然后用text-indent:-9999px;將文字甩到屏幕看不到的地方,9999px應該是足夠了,誰(shuí)的屏幕也沒(méi)那么大吧。
聯(lián)系客服