在開發網頁時,常常會用到CSS背景圖,然而有時候我們只需要讓頁面顯示一張背景圖,而不是讓背景圖在整個頁面不斷重復。
body { background-image: url("bg-image.jpg"); background-repeat: no-repeat; background-size: cover; }
上面的代碼中,我們定義了一個body元素的背景圖,使用了background-repeat:none,這樣就可以讓圖片不重復出現。同時,我們通過background-size: cover來確保圖片完整地覆蓋整個頁面。
比較需要注意的是,如果頁面的內容很多,當用戶向下滾動時就可能會看到背景圖沒有覆蓋整個頁面的情況,這個時候我們可以通過在一個容器元素上設置背景圖來解決這個問題。
.container { background-image: url(bg-img.jpg); background-repeat: no-repeat; background-size: cover; height: 100vh; }
上面的代碼中,我們定義了一個容器元素.container,使用相同的方法來設置背景圖。同時,為確保背景圖覆蓋整個頁面,使用了一個固定高度來設置容器元素的高度,這里我們使用了視口高度(vh)來確保元素的高度等于整個視口的高度。
綜上,通過使用CSS背景圖只顯示一張,可以讓頁面更加美觀,同時也可以提高頁面渲染速度,從而提供更好的用戶體驗。