CSS3 全螢幕背景教學

2014/6/26

不知大家平時瀏覽網站時,是否有看到過全螢幕的背景呢?  很多時候為了要更凸顯視覺的張力,網頁設計師會使用此方法來做畫面上的呈現!今日就讓我們用簡單的CSS3語法來試做一個全螢幕背景的網頁吧!不囉嗦~!跟著小弟一同看圖說故事吧!!
相關範例:https://www.trolldor.com/  

首先我們先將CSS語法放在<head></fead>之間,如下圖:



每個人的圖片不一定會跟我放的位置一樣,請自行修改URL!
接著我們來預覽一下
全視窗螢幕顯示


接著將視窗縮小一些些


將視窗拉成行動裝置用的大小,會自動照比例顯示,底部不會露白


將視窗拉到最小,背景也會自動縮小


是不是很簡單又很實用呢?大家一起動手試做看看吧!

註:支援IE9以上、Chrome、Firefox、Safari、Oprea

回上一頁

歡迎隨時來電與元盛網頁設計公司諮詢

歡迎隨時來電諮詢

立即與元盛聯繫