【门户系统管理】全屏视频风格css
本帖最后由 Bella.Yuan 于 2023-1-5 18:04 编辑【门户和系统管理】【登陆界面】
现在越来越多门户界面使用了视频背景,作为产品宣传,或登录门户的信息介绍而wyn中也支持基于css与js脚本的样式定制
今天就以动态背景的登录界面为例,为大家介绍动态视频登陆界面的设置方法:
先看效果
1.登录wyn系统后台,设定登录界面样式
http://localhost:51980/admin/configuration/portal
css样式参考:
标签html参考:<script>
window.onload=function(){
document.getElementsByClassName("lp-background").style="background-size: cover;";
document.getElementsByClassName("lp-background").innerHTML="<video autoplay muted loop id='myVideo' style='object-fit: cover;'><source src='http://localhost:51980/<font color="#ff0000">test.mp4</font>' type='video/mp4'>Your browser does not support HTML5 video.</video>"
}
</script>
2.上传视频文件
可以将背景视频(上面代码中 test.mp4)
放在Wyn安装目录\Server\wwwroot\ 文件夹下,就可以使用http://localhost:51980/test.mp4 这样的地址访问了
页:
[1]