CSS3之讓背景圖片全部顯示，css3背景圖片顯示

CSS3之讓背景圖片全部顯示，css3背景圖片顯示

起初是在處理一個圖片顯示的問題, 圖片沒有有一部分沒有顯示出來, 之後用到了background-size, 發現有必要總結一下。

background-size

    首先聲明

       background-size是一個css3屬性。 翻譯過來很容易就知道它是用來規定背景尺寸的。

    關於瀏覽器安全色性

        IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+。

    用法

       background-size有4個值分別是(length | percentage | cover | contain)。

            length: 它主要是用來規定背景的寬(width)和高(heigth)。eg: background-size: 100px 100px; 

            percentage: 它主要是用來以父元素的百分比來設定背景的寬高。 eg: background-size: 50% 50%;

            length和percentage的用法其實是相似的, 都是通過設定背景的長寬來顯示圖片。 如果只有一個參數, 則表示另一個參數為auto。

           cover: 它主要表示把圖片擴充到足夠大, 以使背景映像完全覆蓋背景地區。 這裡要注意背景映像的某些部分也許無法顯示在背景定位地區中。eg: background-size: cover;

            contain: 它主要表示把映像映像擴充至最大尺寸，以使其寬度和高度完全適應內容地區。eg: background-size: contain;

    完全顯示圖片內容

    隨便在網上找了張圖片url('http://demo.sc.chinaz.com//Files/DownLoad/moban/201512/moban869/images/banner.jpg')

background-size: contain;background: url('http://demo.sc.chinaz.com//Files/DownLoad/moban/201512/moban869/images/banner.jpg') no-repeat