在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背景中常見的屬性設置,還有一些沒有涉及,就像一些默認值沒有提到,
另外如果還有一些重要但我沒有提到的請大家回復一下,我會及時補充,謝謝!
