CSS中對圖片(background)的一些設置心得總結

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

　　css2中關於background的屬性有：

•   font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px;"> 

   

  　　　　　　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

                                             https://www.cnblogs.com/fingerboy/p/5146229.html