在網頁設計中,有時候需要在視頻上疊加一層高斯模糊的效果,以突出視頻中的某些元素。而這種效果可以通過CSS來實現。
.video { position: relative; } .video::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../video_bg.png); /*高斯模糊圖片*/ backdrop-filter: blur(5px); /*高斯模糊,數值越大模糊程度越高*/ z-index: 1; }
以上代碼中,首先為視頻元素設置了相對定位,并添加了一個偽元素“::before”來實現高斯模糊效果。偽元素的內容為空,寬高與視頻元素相同,背景設置為高斯模糊后的圖片(可使用工具如PhotoShop等實現),并使用“backdrop-filter”屬性來實現高斯模糊效果。
最后,通過“z-index”將偽元素置于視頻元素之上,實現視頻高斯模糊的效果。
下一篇php rawurl