HTML頁(yè)面中，實(shí)現(xiàn)背景圖全屏的方式有多種方法。本文將介紹其中一種最簡(jiǎn)單的方法，即使用CSS3.0新增的一個(gè)屬性background-size。 使用background-size屬性 在CSS樣

HTML頁(yè)面中，實(shí)現(xiàn)背景圖全屏的方式有多種方法。本文將介紹其中一種最簡(jiǎn)單的方法，即使用CSS3.0新增的一個(gè)屬性background-size。

使用background-size屬性

在CSS樣式中添加background-size屬性，并設(shè)置為cover，即可實(shí)現(xiàn)背景圖全屏。

.bg {
  background-image: url("");
  background-size: cover;
}

瀏覽器兼容性

需要注意的是，該方法只在支持CSS3.0的瀏覽器中有效，不支持IE8及以下版本。

平鋪效果與居中效果

如果你的目標(biāo)是實(shí)現(xiàn)平鋪效果，可以使用下面的CSS代碼：

.bg {
  background-image: url("");
  background-repeat: repeat;
}

然而，需要注意的是在小于1024px的屏幕下，居中效果可能會(huì)失效。

使用jQuery模擬的方法

除了使用CSS，還可以使用jQuery來(lái)模擬實(shí)現(xiàn)背景圖全屏的效果。

// HTML
lt;div class"bg"gt;lt;/divgt;
// CSS
.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("");
  background-size: cover;
}

通過(guò)將一個(gè)div設(shè)置為fixed定位，然后使用CSS中的background-size屬性來(lái)實(shí)現(xiàn)背景圖全屏效果。

結(jié)論

通過(guò)本文介紹的方法，你可以輕松實(shí)現(xiàn)HTML頁(yè)面的背景圖全屏效果。無(wú)論是使用CSS3.0的background-size屬性，還是借助jQuery模擬實(shí)現(xiàn)，都可以根據(jù)自己的需求選擇適合的方法。