發(fā)布日期: 2019-5-10 10:07:40 點(diǎn)擊量: 1249
在這里簡(jiǎn)單的介紹一下關(guān)于網(wǎng)頁(yè)制作中的圖片處理的技巧
網(wǎng)頁(yè)制作中圖片處理技巧-慈溪網(wǎng)站建設(shè)
做網(wǎng)站這一行的都應(yīng)該知道，網(wǎng)站優(yōu)化對(duì)一個(gè)網(wǎng)站的重要性，那們其中的有一部分在于運(yùn)維人員，還有一部分就在于程序和制作人員。
那么身為一個(gè)前端，在對(duì)設(shè)計(jì)稿進(jìn)行重構(gòu)的時(shí)候，你應(yīng)該怎樣處理圖片呢？今天就分享一下在余姚網(wǎng)站建設(shè)中背景圖片處理的技巧。
第一：在保持圖片質(zhì)量的情況下，盡可能減小圖片的大小
當(dāng)前端拿到設(shè)計(jì)稿在進(jìn)行切圖的時(shí)候，在存儲(chǔ)為web所用格式的時(shí)候，可以調(diào)整圖片的質(zhì)量來(lái)縮小圖片
第二：減少服務(wù)器請(qǐng)求次數(shù)，圖片能少就少，能不用就不用
在處理圖標(biāo)的時(shí)候，把所有可設(shè)置成背景圖的小圖標(biāo)放置在一張圖片上，寧波網(wǎng)站建設(shè)。設(shè)置成背景圖片，然后在background里調(diào)定位即可
例：現(xiàn)在有一個(gè)Search的按鈕需要放置圖標(biāo)，便可使用如下方法
網(wǎng)頁(yè)制作景圖片處理技巧
如上圖，放大鏡的位置是距頂部20px，距左95px
那我們就可以給Search的button設(shè)置背景圖片為：
Background:url(/image/icon.png) 95px 20px no-repeat;
注意，不要忘記給button去默認(rèn)樣式，加上尺寸-慈溪網(wǎng)絡(luò)公司
還有一種就是設(shè)計(jì)稿中經(jīng)常會(huì)出現(xiàn)帶有底線(xiàn)的標(biāo)題
對(duì)于處理這種東西的時(shí)候，好多萌新都采用做背景圖片的方式來(lái)處理這種問(wèn)題，這就無(wú)形中又多了一張圖片。余姚網(wǎng)絡(luò)公司。其實(shí)根本沒(méi)有必要再去切一張圖片，多麻煩啊，有一個(gè)叫border-bottom 的東西，完全可以把這個(gè)樣式玩出來(lái)
首先，外層要給一個(gè)div，類(lèi)名為title（個(gè)人習(xí)慣），視情況而定給a標(biāo)簽或者是span標(biāo)簽
也就是
Css如下:
.title{ width:100%; height:24px; border-bottom:1px solid #999999;}
.title a{display:block; padding:12px 10px; background:#fff; font-size:24px; line-height:24px; margin:0 auto;}
div給了寬度和高度分別是100%，高度為24像素，底邊1像素實(shí)線(xiàn)，顏色為#999；
文字的標(biāo)簽變?yōu)閷?shí)體，內(nèi)邊距為上下12像素，左右10像素，背景顏色為白色（與設(shè)計(jì)稿的背景顏色相同）字體大小為24像素，行高24像素，居中。
現(xiàn)在可以看一下這些數(shù)據(jù)：div的高是24像素，a標(biāo)簽的高加在一起是48像素，div的高小于a標(biāo)簽的高，也就是a標(biāo)簽溢出了，但是你只要不給div over-flow：hidden的屬性，就可以實(shí)現(xiàn)上圖效果，也就是說(shuō)減少了圖片的使用數(shù)量，減少瀏覽器請(qǐng)求次數(shù)。
網(wǎng)站重構(gòu)的過(guò)程中是十分靈活的，慈溪微信營(yíng)銷(xiāo)，每一個(gè)標(biāo)簽，每一個(gè)元素都在你的掌握之中，靈活運(yùn)用，才回做出更好的效果。
