CSS3背景圖全屏顯示是一種常用的技巧,它可以讓網頁背景圖片充滿整個屏幕。下面介紹如何實現。
html,body{ height:100%; } body{ 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; }
上面的代碼設置了body元素的高度為100%,然后設置了背景圖片,使用了cover關鍵字,意思是保持原始寬高比例的情況下,縮放背景圖像,讓背景圖像的寬高都剛好等于容器的寬高,這樣就實現了背景圖全屏顯示的效果。
另外,我們還可以使用background-position屬性來調整背景圖像的位置,比如將背景圖像居中,代碼如下:
background-position: center center;
這樣就能讓背景圖像在水平和垂直方向都居中顯示。
總之,實現背景圖全屏顯示非常簡單,只需要給容器元素設置背景圖像,然后設置一些CSS屬性即可。