CSS樣式可以很方便的設置全屏效果,讓你的網站更加的美觀大氣。以下是設置全屏的方法。
html, body { height: 100%; } div { height: 100%; }
首先我們需要指定html
和body
的高度都為100%,這樣我們的div
才可以按照html
和body
的高度來設置。然后我們將div
的高度也設置為100%。
background-image: url("image.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat;
接下來我們可以設置背景圖片。我們可以通過background-image
來指定背景圖像的url地址,通過background-size
來讓背景圖片自適應屏幕大小并填滿屏幕,通過background-position
來調整背景圖片的位置居中顯示,通過background-repeat
來禁止背景圖片的重復顯示。
通過以上的設置,我們就可以快速的實現全屏效果。如果你想讓你的網站更加的個性化,可以對以上的屬性進行自由搭配,來實現你想要的效果。