CSS中對圖檔(background)的一些設定心得總結

　　寫網頁的時候很多情況需要對圖檔進行操作，如何在不進行專業的美工裁切操作的情況下而讓自己的素材度達到最大的滿意度呢，這是一個問題，對于懶得開ps切圖的我，通常會直接在網絡上download一張圖檔，直接拖到html裡，這就需要對圖檔的css樣式進行一些調整，鑒于我總是記不住一些樣式屬性而無法讓圖檔按我的想法擺放，不得已每次都要百度一下，幾次下來，讓我很是惱火，于是專門整理了一些css中關于圖檔的一些屬性設定，置于此，以供下次望及時檢視（廢話真多）：

　　css2中關于background的屬性有：

•  background-color: 指定填充背景的顔色，不引圖檔隻需要一個純色背景時用，這種情況下也可直接時用

　　　　　　background：#eee;      

•  background-image: 引用圖檔作為背景,如 

  　　backgroud-image：url("img/bg.jpg");      

•  background-position: 指定元素背景圖檔的位置,這個很多人都不習慣用，但還是蠻有用處的，實際中圖檔的左上角正對應元素的左上角，當你的打算使用像素來定位的時候，可以使用：

  background-position: 0 0;//第一個數字代表x軸水準位置，第二個數字代表y軸垂直位置
  background-position: 0 100px;      

　　當你的元素尺寸不适用像素設定的時候，還可以使用其他數值，如      

　　 background-position: top right; // 圖檔的top對應元素的top 圖檔的right對應元素的right
　　 background-position:  100% 50%; //使用元素的百分比數值設定圖檔位置，道理同上      

•  background-repeat: 決定是否重複背景圖檔，取值有以下幾種：

  background-repeat: repeat;       //圖檔可重複
   background-repeat: no-repeat ; //圖檔不可重複
   background-repeat: repeat-x;    //圖檔在x軸上可以重複
   background-repeat: repeat-y;    //圖檔在y軸上可以重複
   background-repeat: inherit;       //遵從父元素的設定       

• background-attachment: 決定背景圖是否随頁面滾動,取值有：

  background-attachment: scroll; //預設值;表示背景緊貼元素
  background-attachment: fixed;  //背景不随元素滾動，當頁面向下時，背景待在最初相對于浏覽器的位置
  background-attachment: inherit;//遵循父元素的設定      

　　當希望設定background的多個屬性時，可以分别設定每一個，也可以合并為一行，寫在一個屬性裡：

　　background: transparent url(image.jpg) 50% 0 scroll repeat-y;      

         css3中對于background添加了很多屬性：

• background-color,設定圖檔的大小尺寸,取值有好幾個：

  background-size: contain;     //縮小圖檔以适應元素的尺寸（圖檔寬高比不變）
    background-size: cover;       //擴充圖檔以填滿元素（圖檔寬高比不變）
    background-size: 50% 100%;    //自定義調整圖檔大小       

• background-clip，背景修剪，可以很好的控制背景的顯示位置：取值有：

  background-clip: border-box;   //背景顯示在邊框内
   background-clip: padding-box;  //背景顯示在padding内(不是邊框内)
   background-clip: content-box;  //隻在内容内顯示背景（不在padding中，也不在邊框中）
        

　　還有兩個屬性為，background-break和background-origin，我對這兩個屬性并沒有使用過，看了看網上的講解覺得沒啥大用處，這裡就不寫下來誤人子弟了。

css中關于背景的知識點還是很博大精深的，以後有新的了解，再往這兒添。

注：文章參考》》》》http://blog.csdn.net/adenfeng/article/details/8199362