css 图片上添加模糊背景的文字内容

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;
}

展示效果：