這次帶給大家CSS用圖換字多種方法,CSS用圖換字的注意事項有哪些,下面就是實戰案例,一起來看一下。
前面的話
CSS以圖換字的技術,很久都沒人提起了。它是一種在h1標籤內,使用圖像替換文字元素的技術,使頁面在設計和可訪問性之間達到平衡。本文將詳細介紹CSS以圖換字的9種方法
文字隱藏
在h1標籤中,新增span標籤來保存標題內容,然後將其樣式設定為display:none
小火柴的蓝色理想
負縮排
#透過使用text-index:-9999px,這樣比較大的負縮排,讓文字移到頁面以外的區域
小火柴的蓝色理想
負margin
透過使用margin-left:-2000px,讓盒子模型向左偏移2000px,然後將寬度設定為2064px,因此頁面中只顯示2064px中64px的部分。將圖片的背景設為右對齊,且不重複
小火柴的蓝色理想
上padding
因為背景是顯示在padding-box區域中的,而文字是顯示在content-box區域中。所以,將height設定為0,用padding-top來取代height,並設定overflow:hidden。則,可以只顯示背景不顯示文字
小火柴的蓝色理想
0寬高
透過新增一個span標籤來保存文字內容,並將該標籤的寬高設置為0,再設定溢出隱藏即可
小火柴的蓝色理想
文字透明
#設定文字的顏色為transparent,並設定font-size為1px,即減少行高的影響
小火柴的蓝色理想
偽元素
使用before偽元素,content設定為圖片的URL,在h1元素上設定溢出隱藏
小火柴的蓝色理想
#正縮排
設定text-indent:100%,使文字縮排到父元素寬度區域的右側。然後配合設定white-space:nowrap和overflow:hidden,使文字不換行,並溢出隱藏。從而隱藏文字內容
小火柴的蓝色理想
字體大小
透過設定font-size:0,可以將字體大小設定為0
小火柴的蓝色理想
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是CSS用圖片換字多種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!