html切圖__html

一、 網頁中添加圖片的方式有兩種 一種是：通過<img>標籤直接插入到html中
另一種是：通過css背景屬性添加

二、 怎樣來判斷添加圖片方式。。

http://www.poluoluo.com/jzxy/201203/162159.html

Ø 網頁中的裝飾性的圖片，通過背景圖片添加

Ø 使用者圖片，通過插入形式添加

Ø 按鈕，有多個狀態的效果圖片，通過背景圖片添加

三、 背景圖片定位決定因素：

a. 設定背景圖片容器的大小（寬度和高度）

b. 首先要定義背景圖片（background-image）

c. 其次是背景圖片是否重複（background-repeat）

四、 背景圖片定位（background-position）原理

A. 文法：Background-position:水平位置 垂直位置

B. 水平位置/垂直位置設定方法：

1） 數值（px）正負值都可以

2） 百分比（%）範圍：0%—100%

3） 關鍵詞：水平位置：left(左) center(中) right(右)

垂直位置：top(上) center(中) bottom(下)

注意：當只設定一個值時：代表水平位置，垂直位置預設置中

C. 原理分析：

 

 

昨天 13:20 上傳  下載附件  (24.63 KB) 
 昨天 13:20 上傳  下載附件 (41.38 KB) 
 昨天 13:20 上傳  下載附件  (77.43 KB) 

 

 

注意點：圖片定位值為正值時，圖片/容器向右向下移動

圖片定位值為負值時，圖片/容器向左向上移動

D. 定位處理方法：

1. 一張背景圖片定位（針對容器大於圖片） 關鍵詞定位：水平位置（left:縮寫L;center:縮寫C;right:縮寫R;）
垂直位置（top:縮寫T;center:縮寫C;bottom:縮寫B;）

 昨天 13:20 上傳  下載附件  (33.39 KB) 

2. csssprites圖片定位

根據上面的方法就可以搞定的，現在公司對於button等之類的背景圖片的切圖都是切在同一張圖上面的，

但是我們button只需要其中的一部分，這時候就要用上面的方法了

[html]  view plain  copy <button id="btn_submit" style="margin-left: 100px; margin-top: 25px;background-image: url(resources/css/images/buttons.png); width: 85px; height: 30px; background-position: 90%;"                   onclick="javascript:published('publish');">                   <span style="color: white;"> 發 布 </span>               </button>