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