溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS以圖換字的方法有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1. 文字隱藏
在h2標簽中，新增span標簽來保存標題內容，然后將其樣式設置為display:none
2.負縮進
通過使用text-index:-9999px，這樣一個比較大的負縮進，使文本移到頁面以外的區域
3.負margin
通過使用margin-left:-2000px，使盒模型向左偏移2000px，然后將寬度設置為2064px，從而頁面中只顯示2064px中64px的部分。將圖片的背景設置為右對齊，且不重復
4.上padding
因為背景是顯示在padding-box區域中的，而文本是顯示在content-box區域中。所以，將height設置為0,用padding-top來替代height，并設置overflow:hidden。則，可以只顯示背景不顯示文本
5.0寬高
通過新增一個span標簽來保存文本內容，并將該標簽的寬高設置為0，再設置溢出隱藏即可
6.文本透明
設置文本的顏色為transparent，并設置font-size為1px，即減少行高的影響
7.偽元素
使用before偽元素，content設置為圖片的URL，在h2元素上設置溢出隱藏
8.正縮進
設置text-indent:100%，使文本縮進到父元素寬度區域的右側。然后配合設置white-space:nowrap和overflow:hidden，使文本不換行，并溢出隱藏。從而隱藏文本內容
9.字體大小
通過設置font-size:0，可以將字體大小設置為0
感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS以圖換字的方法有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
