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

展示效果：

后来，又找到一共关于透明背景的网站

Glass Morphism (glassgenerator.netlify.app)