問(wèn)題來(lái)源:
在開(kāi)發(fā)頁(yè)面的過(guò)程中澳眷,通常會(huì)有使用一張大圖來(lái)作為網(wǎng)頁(yè)背景的需求夸研,然而在開(kāi)發(fā)過(guò)程中嘉栓,出現(xiàn)過(guò)背景留白或者造成頁(yè)面滾動(dòng)等情況甲脏。
使用圖片作為網(wǎng)頁(yè)背景的目標(biāo)
- 圖片覆蓋整個(gè)網(wǎng)頁(yè),沒(méi)有留白
- 圖片位置居中蒙秒,保持比例
- 跨瀏覽器的兼容性
使用CSS3中的background和background-size
在html
元素上設(shè)置背景
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
在IE8中勃黍,不支持background-size
,可以使用 filter
來(lái)解決這個(gè)問(wèn)題。
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');