CSS背景圖片常見屬性設置


在CSS中,圖片屬性的設置是必不可少的,下面介紹一下常見的圖片屬性:

1)背景圖片插入:background-image:url(位置及名稱);  //默認在父級元素內的左上角

2)背景平鋪方式:background-repeat:no-repeat;   //不平鋪     

3)背景位置:background-position:right bottom;  //橫向在右邊,縱向在下邊,即右下角
                               center center;  //位於中心
                               center right;  //中間靠右
                               100px 200px;  //靠左100 靠上200

4)背景尺寸:background-size:cover/contain/100% 100%  等比例縮放(鋪滿即可)/包含在里面/按盒子大小縮放

  注意:低版本的IE不支持背景尺寸

5)背景顯示方式:background-attachment:scroll//隨屏幕滾動 fixed//固定在可視區域,注意:此時的位置是相對於可視區域的

                                (fixed:這里有一個兼容性性的問題,在IE6中,只有html和body支持這個屬性)

6)在圖片設置邊距時注意IE6的雙倍間距問題:同時有浮動和邊距時產生雙倍間距!

解決方法: display:inline;//變為行內元素即可

 

注意:網頁中能夠選中的圖片就是插入的圖片,否則就是背景圖片!

這里提一下css精靈技術:

    目的:主要是為了減少http請求次數

    核心思想:將多張圖片合成為一張圖片,然后通過背景屬性中的定位來控制顯示部分

 

     當然,這里只是css背景中常見的屬性設置,還有一些沒有涉及,就像一些默認值沒有提到,

     另外如果還有一些重要但我沒有提到的請大家回復一下,我會及時補充,謝謝!

 


免責聲明!

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



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