網(wǎng)頁制作中的圖片處理技巧

時間：2023-08-15 11:57:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-08-15 11:57:01 來源：網(wǎng)站運(yùn)營

網(wǎng)頁制作中的圖片處理技巧： 做網(wǎng)站這一行的都應(yīng)該知道，網(wǎng)站優(yōu)化對一個網(wǎng)站的重要性，那們其中的有一部分在于運(yùn)維人員，還有一部分就在于程序和制作人員。

那么身為一個前端，在對設(shè)計稿進(jìn)行重構(gòu)的時候，你應(yīng)該怎樣處理圖片呢？今天就由盛世陽光的蠟筆小新和你分享一下在網(wǎng)頁制作中背景圖片處理的技巧。

第一：在保持圖片質(zhì)量的情況下，盡可能減小圖片的大小

當(dāng)前端拿到設(shè)計稿在進(jìn)行切圖的時候，在存儲為web所用格式的時候，可以調(diào)整圖片的質(zhì)量來縮小圖片

第二：減少服務(wù)器請求次數(shù)，圖片能少就少，能不用就不用

在處理圖標(biāo)的時候，把所有可設(shè)置成背景圖的小圖標(biāo)放置在一張圖片上，設(shè)置成背景圖片，然后在background里調(diào)定位即可

例：現(xiàn)在有一個Search的按鈕需要放置圖標(biāo)，便可使用如下方法

如上圖，放大鏡的位置是距頂部20px，距左95px

那我們就可以給Search的button設(shè)置背景圖片為：

Background:url(/image/icon.png) 95px 20px no-repeat;

注意，小萌新不要忘記給button去默認(rèn)樣式，加上尺寸

還有一種就是設(shè)計稿中經(jīng)常會出現(xiàn)帶有底線的標(biāo)題

對于處理這種東西的時候，好多萌新都采用做背景圖片的方式來處理這種問題，這就無形中又多了一張圖片。其實根本沒有必要再去切一張圖片，多麻煩啊，有一個叫border-bottom 的東西，完全可以把這個樣式玩出來

首先，外層要給一個div，類名為title（個人習(xí)慣），視情況而定給a標(biāo)簽或者是span標(biāo)簽

也就是

<div class=”title”>

<a href=””>投資云營</a>

</div>

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；

文字的標(biāo)簽變?yōu)閷嶓w，內(nèi)邊距為上下12像素，左右10像素，背景顏色為白色（與設(shè)計稿的背景顏色相同）字體大小為24像素，行高24像素，居中。

現(xiàn)在可以看一下這些數(shù)據(jù)：div的高是24像素，a標(biāo)簽的高加在一起是48像素，div的高小于a標(biāo)簽的高，也就是a標(biāo)簽溢出了，但是你只要不給div over-flow：hidden的屬性，就可以實現(xiàn)上圖效果，也就是說減少了圖片的使用數(shù)量，減少瀏覽器請求次數(shù)。

網(wǎng)站重構(gòu)的過程中是十分靈活的，每一個標(biāo)簽，每一個元素都在你的掌握之中，靈活運(yùn)用，才回做出更好的效果。

如果你覺得以上內(nèi)容對您有用，請關(guān)注盛世陽光“Web堆兒”，我們的宗旨就是提供網(wǎng)站建設(shè)和運(yùn)營中的各種干貨。

原文地址盛世陽光杭州網(wǎng)站建設(shè)：網(wǎng)頁制作中的圖片處理技巧-盛世陽光