html部分
<div class="onlogo">
<img src="../assets/img/banner.png" />
<div class="imgText">
<div class="title">一体化电子印章应用服务</div>
<div class="content">
为企业提供安全可靠、高效便捷的一体化电子印章应用服务,实现电子印章<br>
在全市各领域跨辖区、跨部门、跨行业的共享互通。
</div>
</div>
</div>
css部分:
.onlogo{
position: relative;
}
.onlogo img{
width: 100vw;
}
.onlogo .imgText{
position: absolute;
z-index: 2;
top:25%;
left:30%;
text-align: center;
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.1);
border:2px solid rgba(255, 255, 255, 0.1);
padding: 20px;
color: #fff;
}
.onlogo .imgText .title{
font-size:48px;
padding:25px 0;
font-weight: bolder;
}
.onlogo .imgText .content{
font-size:13px;
}
展示效果: