以圖換字的幾個方法及思路_經驗交流
今天有個朋友做網頁的時候遇到個問題:想保留連結的背景,但又要連結裡的文字消失!可是弄了半天一直沒辦法把這個文字去掉。我想很多學標準的朋友都遇過這個問題,這裡我把常用的幾個方法寫出來,把思緒也講一下,希望能幫助剛開始學習的朋友。
「以圖片換字」就是用圖片取代文字表現。我們都知道,文字在瀏覽器裡的表現形式是很差的,會有鋸齒,沒辦法圓潤還有沒辦法做很多效果。一般情況下網頁的內容部分是不需要做效果的,但是在WEB標準中對於LOGO、標題,常常需要用到這些。用表格來做的話我們只是在某個地方帖上一張圖,這樣的方式比較簡單,但是不利於搜尋。所以我們需要採用標準方式來做,確保網頁處於良好的狀態而有利於搜尋。通常以圖
顯示消失:(display:none;) 這不只是讓容器內的內容消失而是包括容器本身都消失。所以我們必需在容器內再做一個容器來確保內消失部分之後,容器內的背景可以正常顯示。範例:
複製程式碼 程式碼如下:
標題內容
#logo {display:none; background:URL; width:300px; height:100px;} 如果是這樣寫那麼你根本什麼也看不到。那正確的方式是什麼寫呢?看範例:
複製程式碼 程式碼如下:
複製程式碼 程式碼如下:
#logo {background:URL; width:300px; height:100px;}#logo a {display:none;}
大家猜一下這個程式碼能顯示出東西嗎?事實是背景顯示了,可是連結沒了。我們上面說過:被賦於了display:none;屬性的容器本身也會消失。那我們就清楚了,必需要在這個A標籤裡加個容器。我們再看範例:
複製程式碼 程式碼如下:
#logo {background:URL; width:300px; height:100px;}#logo a span {display:none;} 這樣的是不是就正確了呢?還是不行,為什麼呢,我們都知道A不是區塊級標籤,也就是說A的高寬都是內容來決定的,現在內容消失了,也就沒有了這個高寬的屬性了,那麼這個連結也就成了沒有熱區的連結了。可能是點不著的。我們必需要把上面的程式碼再做修改。
複製程式碼 程式碼如下:
#logo a {background:URL; width:300px; height:100px; display:block;}#logo a; span {display:none;}
注意這裡的A標籤的屬性一定要加上display:block;把他強制為區塊級元素。這樣A標籤就成了一個寬為300高為100,有一個背景沒有文字內容的連結形式。大家看到了上面A標籤裡還加了一個span標籤,好像有點多餘。能不能不用span也可以實現效果。可以,不過思路就不一樣了,而是下面的這種位置移動法。
位置移動:也就是讓內容啊分進行位置移動,移出顯示區之外。我們還是看程式碼來了解這個方法。
複製程式碼 程式碼如下:
#logo, #logo a {width:300px; height:100px; overflow:hidden;}#logo a {background:URL; overflow:hidden;}#logo a {background:URL; padding:100pxx 0 0; display:block;}
在CSS中設定了#logo與A有一個溢出隱藏(overflow:hidden;)也就是說有超出300*100大小的就會被隱藏。我們看A被定義了一個padding:100px 0 0; 這個頂部的內距正好把內容壓到了顯示區以外。那為什麼#logo也要用overflow:hidden;呢?因為在IE下會出現一個小BUG,A的內容沒辦法溢出隱藏所以必需要在父級標籤上還要加一個overflow:hidden; 以上內容只是我比較常用的兩種方法,當然還會有一些別的方式方法,這些方法都有各自的缺點,不過各種方法之間也都有互補的。在應用時可以依據情況選擇使用即可。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
如何修復KB5055523無法在Windows 11中安裝?
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
3 週前
By DDD
<🎜>:死鐵路 - 如何馴服狼
4 週前
By DDD
R.E.P.O.的每個敵人和怪物的力量水平
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>:種植花園 - 完整的突變指南
2 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

格子呢是一塊圖案布,通常與蘇格蘭有關,尤其是他們時尚的蘇格蘭語。在Tartanify.com上,我們收集了5,000多個格子呢
