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