不知大家平時瀏覽網站時,是否有看到過全螢幕的背景呢? 很多時候為了要更凸顯視覺的張力,網頁設計師會使用此方法來做畫面上的呈現!今日就讓我們用簡單的CSS3語法來試做一個全螢幕背景的網頁吧!不囉嗦~!跟著小弟一同看圖說故事吧!! 相關範例:https://www.trolldor.com/ 首先我們先將CSS語法放在<head></fead>之間,如下圖: 每個人的圖片不一定會跟我放的位置一樣,請自行修改URL! 接著我們來預覽一下 全視窗螢幕顯示↓ 接著將視窗縮小一些些↓ 將視窗拉成行動裝置用的大小,會自動照比例顯示,底部不會露白↓ 將視窗拉到最小,背景也會自動縮小↓ 是不是很簡單又很實用呢?大家一起動手試做看看吧! 註:支援IE9以上、Chrome、Firefox、Safari、Oprea
回上一頁