視頻背景在網頁設計中常常被使用到,給用戶帶來視覺上的享受。下面是一些CSS代碼可以幫助您在網頁中添加視頻背景:
/* 將視頻作為背景 */ #bg-video { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: -1; overflow: hidden; } /* 隱藏視頻控件 */ video::-webkit-media-controls { display:none !important; } /* 禁用視頻播放后出現的相關鏈接 */ video::-webkit-media-controls-enclosure{ display:none !important; }
在代碼中,我們首先通過設置position:fixed
屬性將視頻固定在頁面上,并通過z-index:-1
置于所有其他元素下方。
接著,我們設置min-width:100%
和min-height:100%
使視頻鋪滿整個屏幕。這里使用了overflow:hidden
來防止視頻在頁面滾動時出現滾動條。
為了讓視頻看起來像是背景,我們需要將控件隱藏起來。這里使用了::-webkit-media-controls
和::-webkit-media-controls-enclosure
來隱藏視頻控件以及相關鏈接。
現在,我們已經成功地將視頻作為網頁的背景。您也可以根據需求進一步定制這些代碼。
上一篇視頻展示css