在網(wǎng)站制作的過程當(dāng)中使用背景圖片似乎是繞不過去的一個(gè)環(huán)節(jié),背景圖的使用能更好的襯托出想要表達(dá)的內(nèi)容,也可以讓局部細(xì)節(jié)達(dá)到最完美的狀態(tài),合理使用背景能夠讓視覺感官有一個(gè)更加的舒服體驗(yàn),專業(yè)設(shè)計(jì)師會(huì)讓背景用的恰到好處,沒有目的的使用往往會(huì)適得其反,不僅達(dá)不到想要表現(xiàn)的效果,反而還會(huì)喧賓奪主影響主體內(nèi)容的表現(xiàn)。
制作網(wǎng)站時(shí)對(duì)于背景圖片的選擇使用技巧,鄭州做網(wǎng)頁(yè)設(shè)計(jì)公司分享幾種常用的使用方法:
第一種用法:幻燈圖或大banner圖
一個(gè)當(dāng)下制作網(wǎng)站往往離不開大尺寸的幻燈圖片或banner大圖,大圖組合創(chuàng)意和文字給人帶來(lái)的視覺效果是相當(dāng)震撼的,再加上一般會(huì)顯示在網(wǎng)頁(yè)的第一屏重要程度不用言語(yǔ),使用方式一般做背景來(lái)用,寬度1920px高度不超過700px,只要是新做的網(wǎng)站都會(huì)有這個(gè)模塊。
第二種用法:頁(yè)面中間固定模式
在這種使用方式下,大圖片一般會(huì)以全屏尺寸來(lái)設(shè)計(jì),如1920X900px的尺寸,平鋪不重復(fù)做為網(wǎng)頁(yè)某一塊的背景,同時(shí)設(shè)置圖片展現(xiàn)行為fixed固定不動(dòng),當(dāng)用戶拉動(dòng)網(wǎng)頁(yè)下拉滾動(dòng)條的時(shí)候會(huì)造成頁(yè)面內(nèi)容在往上移動(dòng)而背景固定不動(dòng)的視頻效果。
第三種用法:小范圍頻道背景
往往使用于網(wǎng)頁(yè)小塊的頻道頭或分類標(biāo)題下,可以是純顏色,如果想要達(dá)到很好的視覺效果就只能使用圖片,做為背景圖片時(shí)顏色往往較重,而上面的文字一般用亮色,用一個(gè)重的背景來(lái)襯托文字,視覺效果相當(dāng)不錯(cuò)。
第四種用法:動(dòng)態(tài)效果展示
在這種展示效果中用到的背景圖片往往是以PNG圖片為主的透明素材,用DIV+CSS寫好布局再加CSS3的動(dòng)畫特效,能給人非常強(qiáng)烈的視覺體驗(yàn),CSS3動(dòng)畫效果的強(qiáng)大也是FLASH沒落的一個(gè)重要原因。
第五種用法:網(wǎng)頁(yè)精靈圖(css sprite)
所謂網(wǎng)頁(yè)精靈圖Sprite即使用一張大圖把整個(gè)或部分網(wǎng)頁(yè)用到的小圖都全部集中到一張圖片上,然后在網(wǎng)頁(yè)使用時(shí)再通過各個(gè)小圖的坐標(biāo)位置來(lái)分別調(diào)用,使用負(fù)值法來(lái)調(diào)用對(duì)應(yīng)的小圖片位置。優(yōu)點(diǎn)是可以最大限度的減少網(wǎng)站的http請(qǐng)求次數(shù),后期修改小圖片只需修改Sprite圖即可。
免費(fèi)咨詢:18838171308