1. 程式人生 > >背景圖片自適應大小(css3)

背景圖片自適應大小(css3)

body {

            background: url(/happytime/img/index.jpg) no-repeat center center fixed; 

            background-size: 100%;//此處要注意,可以填cover也可以填100%。建議填100%

        }

 備註:折騰了倆個多小時,才解決一個bug,就在上面標註的那個需注意的地方。background-size是一個css3屬性。原本設的置是cover,圖片會填充螢幕。但是發現在360極速瀏覽器下左邊會有1畫素的白邊。按照W3CShool給的值就三種:cover,contain,auto。其實這裡可以填畫素也可以填百分比。按理說百分比和cover是一個效果,但是在360極速瀏覽器裡,就是差了那麼一兩個畫素,別的瀏覽器都沒問題。

其實準確的說是隻有在360極速瀏覽器的極速模式裡才有這個問題。

background-size的兩個可選值的含義:contain是讓背景圖片恰好顯示在容器中,圖片的外邊緣“頂著”容器的內邊緣;而cover是覆蓋容器,容器的外邊緣“頂著”圖片的內邊緣。

另外,center是讓圖片居中定位,讓圖片的中部位於瀏覽器的中部。fixed使得背景不會跟隨滾動條移動。