css里的背景屬性有哪些,如何去使用哪些屬性


分類:純色背景    背景圖像

  1、背景顏色

    background-color : 任意合法的顏色 和 transparent  

   2、背景圖像 

    background-image : url(想要加載的圖片)

   3、背景圖片平鋪

    background-repeat : 

         repeat:默認值水平垂直方向都平鋪

         repeat-x : 水平方向平鋪

           repeat-y : 垂直方向平鋪

           no-repeat : 默認不平鋪      

 4、背景圖片的尺寸

      background-size : value1    value2     寬度    高度    (單位px)

               value%   value%    寬度    高度    (單位%)

               cover :全覆蓋  將背景圖等比放大知道背景圖完全覆蓋到元素的所有區域

               contain : 包含  將背景圖等比放大,直到下邊或者右邊有一個邊緣碰到元素為止

  5、背景圖片固定 

      background-attachment : fixed;(固定)

                   scorll(滾動)

  6、背景定位

      改變背景圖片在元素中的默認位置

      background-position : 注意對於這個Firefox和Opera,background-attachment必須設置為“fixed”(固定)

          left(top,center,bottom)

          right(top,center,bottom)

          center(top,center,bottom)

          x%    y%(注意第一個值是水平位置,第二個值是垂直位置;左上角是0%    0% ,右下角是100%   100%,如果只指定了一個值其他值是50%,默認為0%    0%)

          xpos  ypos(第一個值是水平位置,第二個值是垂直位置;單位可以是像素也可以是其他css單位,如果只指定了一個值其他值是50%;可以使用%和positions)

          inherit : 指定background-position屬性設置應該從父元素繼承

  7、雪碧圖、精靈圖

      作用:將一些小的背景圖合並到大的背景中去,以便實現減少服務器的請求

      步驟:1>、我們根據圖像的大小創建一個元素

          2>、將多張圖片合並為一張圖片,下載全部所需的資源,只需一次請求,減少鏈接的消耗

          


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM