CSS3 背景屬性與製做雪碧圖

CSS的圖片轉換主要是：

     雪碧圖 ：利用css的背景定位來顯示須要顯示的圖片部分，即 利用background和background-position背景屬性渲染。

     先認識幾個屬性：

         　　background:背景

　　　　   background-position:背景佈局

     　　　 background-color：背景顏色

              background-size：背景圖片大小

　　　　　background-image:背景圖片路徑

　　　　   background-repeat：背景平鋪方式

　　　　   background-attachment：固定定位

•  在一個聲明中設置全部背景屬性：bcaokground

body
  { 
  background:red url(bgimage.gif) no-repeat center;     //背景顏色 圖片路徑 平鋪方式 居中方式
  }

• 在一個聲明中設置固定的背景圖像：background-attachment

.box
  { 
  background-image: url(圖片路徑); 
  background-attachment: fixed;     //固定圖片位置
  }

值	描述
scroll	默認值。背景圖像會隨着頁面其他部分的滾動而移動。
fixed	當頁面的其他部分滾動時，背景圖像不會移動。               //網頁中的固定小廣告
inherit	規定應該從父元素繼承 background-attachment 屬性的設置。

• 屬性設置背景顏色 ： background-color 

.box
  {
  background-color:yellow;
  }

p
  {
  background-color:rgb(255,0,255);
  }

值	描述
color_name	規定顏色值爲顏色名稱的背景顏色（好比 red）。
hex_number	規定顏色值爲十六進制值的背景顏色（好比 #ff0000）。
rgb_number	規定顏色值爲 rgb 代碼的背景顏色（好比 rgb(255,0,0)）。
transparent	默認。背景顏色爲透明。

• 定義背景圖片的平鋪方式   background-repeat 

repeat         // 默認。背景圖像將在垂直方向和水平方向重複。
repeat-x      //背景圖像將在水平方向重複。
repeat-y      //背景圖像將在垂直方向重複。
no-repeat      //背景圖像將僅顯示一次。

.box1{
            width: 300px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
            background: url(../img/images/icon.png);
            background-repeat: no-repeat;      //不平鋪
        }

•  製做雪碧圖 ：hover

eg：定義一個box存放圖片（視口爲0）

 .box1{
            width: 22px;        //定義移入圖片的大小
            height: 20px;
            border: 1px solid black;
            background: url(../img/images/icon.png);
        }
        .box1:hover{
            background-position: -22px 0;       //鼠標移動的圖片位置，即X Y軸距離視口的距離
        }

     移動鼠標後：

 

eg：定義一個box存放圖片（視口不爲0）

  .box1{
            width: 21px;
            height: 17px;
            background: url(../img/images/icon.png);
            background-position: 0 -63px;      //將圖片移至視口0處
        }
        .box1:hover{
            background-position: -21px -63px;      //再移動圖片位置
        }

         移動圖片至視口處：移動圖片之後，hover: