CSS用圖片換字多種方法

php中世界最好的语言
發布: 2018-03-20 16:31:06
原創
1629 人瀏覽過

這次帶給大家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怪異盒模型與標準盒模型如何使用

CSS3中的transform功能詳解

#

以上是CSS用圖片換字多種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!