<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          網頁開發中利用CSS以圖換字的多中實現方法總匯

          時間:?2017-12-11閱讀:?902標簽:?網頁

          文字隱藏 

          在h1標簽中,新增span標簽來保存標題內容,然后將其樣式設置為display:none 

          <style>
              h1 {
                width: 64px;
                height: 64px;
                background: url();
                font: 12px/1 '微軟雅黑';
              }
              span {
                display: none;
              }
            </style>
            <h1>
              <span>文字</span>
            </h1>


          負縮進  

          通過使用text-index:-9999px,這樣一個比較大的負縮進,使文本移到頁面以外的區域 

          <style>
              h1 {
                width: 64px;
                height: 64px;
                background: url();
                font: 12px/1 '微軟雅黑';
                text-indent:-9999px;
              }
            </style>
            <h1>文字</h1>


          負margin 

          通過使用margin-left:-2000px,使盒模型向左偏移2000px,然后將寬度設置為2064px,從而頁面中只顯示2064px中64px的部分。將圖片的背景設置為右對齊,且不重復 

          <style>
              h1 {
                width: 2064px;
                height: 64px;
                background: url() right no-repeat;
                font: 12px/1 '微軟雅黑';
                margin-left:-2000px;
              }
            </style>
            <h1>文字</h1>


          上padding 

           因為背景是顯示在padding-box區域中的,而文本是顯示在content-box區域中。所以,將height設置為0,用padding-top來替代height,并設置overflow:hidden。則,可以只顯示背景不顯示文本

          <style>
              h1 {
                width: 64px;
                padding-top: 64px;
                height:0;
                overflow:hidden;
                background: url();
                font: 12px/1 '微軟雅黑';
              }
            </style>
            <h1>文字</h1>


           0寬高

          通過新增一個span標簽來保存文本內容,并將該標簽的寬高設置為0,再設置溢出隱藏即可 

          <style>
              h1 {
                width: 64px;
                height: 64px;
                background: url();
                font: 12px/1 '微軟雅黑';
              }
              span{display:block;width: 0;height:0;overflow:hidden;}
            </style>
            <h1><span>文字</span></h1>


          文本透明  

          設置文本的顏色為transparent,并設置font-size為1px,即減少行高的影響

          <style>
              h1 {
                width: 64px;
                height: 64px;
                background: url();
                color:transparent;
                font-size:1px;
                }
            </style>
            <h1>文字</h1>


          偽元素  

          使用before偽元素,content設置為圖片的URL,在h1元素上設置溢出隱藏 

          <style>
              h1 {
                width: 64px;
                height: 64px;
                overflow: hidden;
                font: 12px/1 '微軟雅黑';
              }
              h1:before {
                content: url();
                display: block;
              }
            </style>
            <h1>文字</h1>


          正縮進  

          設置text-indent:100%,使文本縮進到父元素寬度區域的右側。然后配合設置white-space:nowrap和overflow:hidden,使文本不換行,并溢出隱藏。從而隱藏文本內容 

          <style>
              h1 {
                width: 64px;
                height: 64px;
                background: url();
                text-indent: 100%;
                white-space: nowrap;
                overflow: hidden;
                font: 12px/1 '微軟雅黑';
              }
            </style>
            <h1>文字</h1>


          字體大小  

           通過設置font-size:0,可以將字體大小設置為0

          <style>
              h1 {
                width: 64px;
                height: 64px;
                background: url();
                font-size:0;
              }
            </style>
            <h1>文字</h1>



           


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/240

          什么是DOCTYPE聲明?對網頁起何作用?

          要建立符合標準的網頁,DOCTYPE聲明是必不可少的關鍵組成部分。那么什么是DOCTYPE聲明?對網頁起何作用?DOCTYPE是document type(文檔類型)的簡寫;!DOCTYPE聲明是一種指令

          javascript如何獲取網頁的標題(title)?

          網頁的標題(title),一般是由HTML文件的<title>標簽決定的。如果想要獲取網頁的標題(title),其實就是獲取<title>標簽中的內容。下面本篇文章就來給大家介紹一下獲取方法,希望對大家有所幫助。

          網頁tab鍵的實現

          前端常用tab鍵的實現,用到的原理是當點擊一個元素時,通過javascript操作css的display屬性,達到控制另一個元素的顯示(display: block)與不顯示(display: none),需要注意的是,由于使用的是onclick事件

          如何給網頁劃分結構?

          學習前端第一步:劃分網頁結構,網頁的結構的劃分應該遵循哪些原則,如何去劃分網頁的結構呢?對于一個前端初學者,第一步就是要學會如何劃分一個網頁的結構。當設計師給到你一張設計圖,你需要根據這張圖做出一個符合標準的頁面

          網頁屏蔽(鎖左、右鍵)的非JS方法

          但是這種屏蔽方法的破解方法也是眾所周知的。那就是連續單擊鼠標左鍵和右鍵便又可以看到右鍵功能表了。但是,我見過一種很好的屏蔽右鍵的方法。它的原理和上面所說的不同。它并不是用JS來編寫的腳本,而是利用定義網頁屬性來起到限制的作用

          網頁設計十大流行趨勢

          最近看到越來越多的網絡設計嘗試個性化的風格,其中比較突出的一點是個性化字體的增多:用自己獨特設計的字體代替標準印刷體,讓設計更加獨特,配色改變反應了人們審美需求的改變。同色系網站設計將成為主流

          靜態和動態網頁的區別?

          在靜態web程序中,客戶端使用web瀏覽器經過網絡連接到服務器上,使用HTTP協議發起一個請求(Request),告訴服務區我現在需要得到哪個頁面,所有的請求交給web服務器

          FreeMarker網頁靜態化

          網頁靜態化解決方案在實際開發中運用比較多,例如新聞網站,門戶網站中的新聞頻道或者是文章類的頻道。網頁靜態化技術和緩存技術的共同點都是為了減輕數據庫的訪問壓力,但是具體的應用場景不同

          使用 CSS 追蹤用戶

          除了使用 JS 追蹤用戶,現在有人提出了還可以使用 CSS 進行網頁追蹤和分析,譯者認為,這種方式更為 優雅,更為 簡潔,且 不好屏蔽,值得嘗試一波

          h5網頁水印SDK的實現代碼示例

          在網站瀏覽中,常常需要網頁水印,以便防止用戶截圖或錄屏暴露敏感信息后,追蹤用戶來源。如我們常用的釘釘軟件,聊天背景就會有你的名字。那么如何實現網頁水印效果呢?

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网