在CSS中,我們可以使用背景圖片并將其設置為鋪滿整個屏幕,以下是一些示例代碼:
1、使用background-image
屬性設置圖片:
body { background-image: url('your-image-url-here'); background-size: cover; background-position: center; }
在這個示例中,background-image
屬性用于設置背景圖片。background-size: cover;
確保圖片始終覆蓋整個屏幕,無論屏幕大小如何變化。background-position: center;
則確保圖片始終在屏幕中央。
2、使用@media
規(guī)則響應式地設置背景圖片:
body { background-image: url('your-image-url-here'); background-size: cover; background-position: center; } @media (max-width: 600px) { body { background-image: url('your-small-screen-image-url-here'); } }
在這個示例中,我們?yōu)檩^小的屏幕(寬度小于600px)設置了一個不同的背景圖片,這樣,當屏幕寬度小于600px時,背景圖片會自動切換到your-small-screen-image-url-here
。
3、使用vh
和vw
單位設置背景圖片的尺寸:
body { background-image: url('your-image-url-here'); background-size: 100vw 100vh; background-position: center; }
在這個示例中,我們使用視口寬度(vw)和視口高度(vh)單位來設置背景圖片的尺寸,這樣,無論屏幕大小如何變化,圖片都會始終填滿整個屏幕。
這些示例中的your-image-url-here
和your-small-screen-image-url-here
都是占位符,你需要將其替換為你要使用的實際圖片URL。