CSS中實現圖片滿屏很常見,可以通過以下方式實現:
html, body { height: 100%; /* 設置html和body元素的高度為100% */ margin: 0; /* 取消默認的margin */ } .background { background-image: url('image/bg.jpg'); /* 設置背景圖片 */ background-size: cover; /* 讓背景圖片盡可能鋪滿整個容器 */ background-position: center; /* 將圖片的位置設置為容器的中心 */ height: 100%; /* 設置容器的高度為100% */ }
這個方法的關鍵是通過設置html和body元素的高度為100%,讓容器元素的高度隨著父元素高度的變化而自動適應,從而實現圖片滿屏的效果。同時,background-size屬性設置為cover,會讓背景圖片盡可能填滿整個容器。
這個方法可以用于所有容器元素,包括div、section、article、header、footer、main等等。
上一篇css中圓形怎么做出
下一篇css中圖片靠下設置