国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 在線咨詢 在線咨詢
18143453325 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)絡(luò)營銷 > CSS無圖片技術(shù)的實現(xiàn)方法有哪些?

CSS無圖片技術(shù)的實現(xiàn)方法有哪些?

時間:2022-05-29 16:54:01 | 來源:網(wǎng)絡(luò)營銷

時間:2022-05-29 16:54:01 來源:網(wǎng)絡(luò)營銷

最近有個朋友在幫一個客戶在搭建一個網(wǎng)站,為了網(wǎng)站的美觀性,使用了大量的圖片,從而導(dǎo)致了網(wǎng)站打開速度很慢。于是,來問我有什么好的解決辦法?其實對于這個問題,常規(guī)使用的解決方法都是從提高服務(wù)器各項性能和壓縮網(wǎng)站圖片大小來入手的,其實除了這些方法之外,億企邦還建議大家可以嘗試一下使用CSS無圖片技術(shù)。

一、什么是CSS無圖片技術(shù)?

CSS無圖片技術(shù)就是在不使用CSS Image(通過CSS的引入的背景圖片,不包括img標(biāo)簽內(nèi)的圖片)情況下生成類似圖片效果的技術(shù);換句話的意思就是在使用純CSS生成類似圖片效果的技術(shù)。

二、為什么要用CSS無圖片技術(shù)?

首先我們可以通過yslow的statistics功能查看新浪微博最新版首頁的文件,得到Stylesheet File(CSS文件)大小為206.8K, CSS Image大小為623.8K。明顯發(fā)現(xiàn)CSS文件比CSS Image小很多。

當(dāng)然單純拿這兩個來比,還不能說明什么。下面我們通過計算來說下CSS文件與CSS Image關(guān)系:CSS Image是由一系列的圖片組成,每一張圖,即使最小一個小箭頭(如下圖所示),你存成一張圖片,怎么也得1KB吧。

例如微博的這個小三角圖形:

如果我們?nèi)恳訡SS的形式模擬這個小箭頭,空間資源會占多少?我們來計算一下,首先我們先來貼下代碼。

HTML代碼如下:

CSS代碼如下:

從上面的代碼可以看出,在CSS文件中總共不到200個字符,如果我們按照1字符等于1B的來計算的話,200個字符大概等于0.2KB,比直接用圖片做節(jié)約了4/5的下載資源,明顯減少請求資源的大小。

如果我們盡可能的使用無圖片技術(shù)來實現(xiàn),明顯可以提高頁面的加載速度;其次,我們知道每一個CSS image都需要一個http請求去加載,瀏覽器每次發(fā)出的請求個數(shù)是有限的,減少CSS image的個數(shù),顯然減少了http請求數(shù),也就提高頁面的呈現(xiàn)速度;再次,經(jīng)常使用微博的同學(xué)都知道,微博是可以換膚,如果使用CSS無圖片技術(shù),我們僅需要簡單換一下CSS屬性就能實現(xiàn)換膚,提高了代碼的可維護性。

通過以上分析,使用CSS無圖片技術(shù),可以總結(jié)得到以下3個優(yōu)點:

1、減少請求資源的大小。

2、減少http的請求個數(shù)。

3、提高可維護性。

三、CSS無圖片技術(shù)的實現(xiàn)方法

對于CSS無圖片技術(shù)的實現(xiàn)方法,億企邦大致整理了一下,大概有四種方法:

1、通過background-color、border生成圖片

我們可以利用CSS的background-color、border屬性可以生成一些圖形,例如三角。純粹的CSS2的內(nèi)容,完全可以兼容IE6。

(1)、用background-color生成的小方塊,效果如下:

CSS代碼:

(2)、用border生成的小方塊,效果如下:

CSS代碼:

(3)、用border生成的小三角,效果如下:

CSS代碼:

(4)、用border生成的尖三角,效果如下:

CSS代碼:

(5)、用border生成的斜三角,效果如下:

HTML結(jié)構(gòu):

CSS代碼:


  

通過以上5種圖形,我們可以得到以下圖形,效果圖如下圖所示:

這里只貼一下中間圖形的代碼,其他的,要興趣的博友可以根據(jù)億企邦上所介紹的自己去研究,更多有意思的圖形等著你去完成。

HTML結(jié)構(gòu):

CSS代碼:


  
  

2、通過字符生成圖片

例如尖角、圓點以及箭頭,這也是CSS2范疇,完全可以兼容ie6。這個在博中使用廣泛,這里不單獨寫demo了。

(1)、尖角,效果圖如下

HTML結(jié)構(gòu):

CSS代碼:

(2)、圓點,效果圖如下

HTML結(jié)構(gòu):

CSS樣式:

(3)、箭頭,效果圖如下

HTML結(jié)構(gòu):

對于CSS樣式,雖然以上沒做具體的定義,但是億企邦建議可以對字體樣式做些限制,以便在各種瀏覽器表現(xiàn)一樣。

3、通過CSS3的gradient等生成圖片

對于CSS3生成圖片的方法(這個要考慮低級瀏覽器不兼容的問題),我們可以使用box-shadow,border-radius,gradient漸變等CSS3的新屬性生成圖形,IE瀏覽器下漸變背景的使用需要使用IE的漸變?yōu)V鏡,但是使用濾鏡資源會消耗很大,所以,根據(jù)項目實際情況去權(quán)衡是否使用濾鏡。

我們先看下谷歌搜索按鈕的例子:

CSS樣式:

GOOGLE搜索這個按鈕沒有使用濾鏡,IE瀏覽器就沒有做漸變處理,大家都知道GOOGLE是非常在意性能的公司,有些時候為了極致的性能,稍微犧牲一下視覺體驗也是可以接受的。

再看一下淘寶網(wǎng)“查看更多”的按鈕:

CSS樣式:

淘寶網(wǎng)這個按鈕使用濾鏡,可以完美兼容IE,當(dāng)然這也不能去猜測淘寶不注重性能,只能說視覺體驗和性能博弈的結(jié)果。

4、CSS3的自定義字體(@font-face)生成圖片

雖然這個方法不屬于真正意義的無圖片,但是容易編輯和維護,更重要的是它的尺寸,顏色可以通過CSS來控制,這間接地做到少使用圖片。

具體應(yīng)用常見于微博微吧的ICON:

HTML結(jié)構(gòu):

CSS樣式:

億企邦點評:

最后,提醒大家一點:CSS無圖片技術(shù),是我們在寫CSS樣式中需要形成的一種理念,我不必死磕無圖片技術(shù),要在實際的項目權(quán)衡利弊,根據(jù)實際情況,靈活運用無圖片技術(shù)做一些合理有效的性能優(yōu)化。

關(guān)鍵詞:方法,實現(xiàn),圖片

74
73
25
news

版權(quán)所有? 億企邦 1997-2022 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉