上海網頁設計 如何用(yòng)css背景圖片拉伸 以及100% 滿屏顯示呢(ne)？這(zhè)個(gè)問題聽(tīng)起來(lái)似乎很簡單。但是很遺憾的(de)告訴大(dà)家。不是我們想的(de)那麽簡單。
比如一個(gè)容器（body,div,span）中設定一個(gè)背景。這(zhè)個(gè)背景的(de)長(cháng)寬值在css2.1之前是不能被修改的(de)。
所以實際的(de)結果是隻能重複顯示，所以出現了(le)repeat,repeat-x,repeat-y,no-repeat這(zhè)些屬性。就是用(yòng)來(lái)控制背景圖片的(de)顯示的(de)。 所以一般用(yòng)作背景圖片的(de)有2類 ：
1.是一整張大(dà)圖，尺寸和(hé)區(qū)域大(dà)小剛好吻合
2.一個(gè)很小的(de)條狀圖，通(tōng)過repeat後，形成一個(gè)很規則的(de)大(dà)圖背景
但是css3出現以後，這(zhè)個(gè)情況被改善了(le)。background-size 屬性可(kě)以讓我們之前的(de)希望成真
而且這(zhè)個(gè)屬性在firefox，chrome，以及ie9上都可(kě)以使用(yòng)
具體使用(yòng)方法如下(xià)：
背景圖尺寸（數值表示方式）：
代碼如下(xià):
#background-size{ background-size:200px 100px; }
背景圖尺寸（百分(fēn)比表示方式）：
代碼如下(xià):
#background-size2{ background-size:30% 60%; }
背景圖尺寸（等比擴展圖片來(lái)填滿元素，即cover值）：
代碼如下(xià):
#background-size3{ background-size:cover; }
背景圖尺寸（等比縮小圖片來(lái)适應元素的(de)尺寸，即contain值）：
代碼如下(xià):
#background-size4{ background-size:contain; }
背景圖尺寸（以圖片自身大(dà)小來(lái)填充元素，即auto值）：
代碼如下(xià):
#background-size5{ background-size:auto; }
