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