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

展示效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/675787.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OverlayFS在嵌入式系统中的应用

文章目录 抛出问题基本概念使用场景OverlayFS的详细介绍框架目录合并修改文件删除文件添加文件小结 OverlayFS在嵌入式系统中的应用内核配置OverlayFS简单应用OverlayFS应用新思路 总结 环境介绍 硬件&#xff1a;T113平台 软件&#xff1a;Tina5.0 SDK&#xff08;使用的build…

RocketMQ中client_log非常大

rocketmq默认不使用logback日志&#xff0c;所以得额外配置&#xff0c;使mq使用logback配置 使用logback中的日志配置 配置MQ 使用logback的配置,具体原理见ClientLogger.java的static代码块 在应用启动函数中添加如下代码 System.*setProperty*(ClientLogger.*CLIENT_LOG_USE…

Coolmuster Android助手评测:简化Android到电脑的联系人传输

产品概述 Coolmuster Android助手是一款旨在简化Android设备与计算机之间数据管理和传输过程的全面工具。它以用户友好的界面和全面的功能&#xff0c;成为寻求高效数据管理解决方案的Android用户的热门选择。 主要特点和功能Coolmuster Android助手拥有一系列使其成为管理Andr…

TMS FNC WX Pack TMS软件分发的一组应用程序

TMS FNC WX Pack TMS软件分发的一组应用程序 TMS FNC WX Pack是由TMS软件分发的一组应用程序。这些活动是100%的跨平台和跨Frimorc&#xff0c;并在不同的应用程序中得到支持&#xff0c;如Web应用程序、Windows、Linux等。阿拉伯语视觉组件库。安装这些计算机的过程非常简单高…

postman教程-10-使用cookie

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了Postman Authorization授权的几种方法&#xff0c;本小节我们讲解一下Postman 使用cookie的方法。 Postman 的 cookie 管理器使您能够查看和编辑与不同域关联的 cookie。您可以为域手动创建 c…

Windows10 设置默认编码为utf-8

Windows10 设置默认编码为utf-8 序言步骤 序言 有一些程序&#xff0c;默认读取出来gbk的会报错&#xff0c;有很多都是&#xff0c;干脆就直接设置电脑为默认utf-8的&#xff0c;这样就不用担心读取成gbk的怎么样了&#xff0c;具体是否需要要看自己的程序 步骤 完成了

高端、大气、很牛B的免费wordpress模板主题

这是一款专为WordPress打造的极简主义风格主题&#xff0c;以白色和黑色为主色调&#xff0c;搭配红色点缀&#xff0c;营造出一种简洁、专业且具有视觉冲击力的效果。 该主题的设计理念是“简单即美”&#xff0c;旨在帮助用户快速搭建一个美观、易用的网站。它提供了丰富的自…

【Java】接口详解

接口是抽象类的更进一步. 抽象类中还可以包含非抽象方法, 和字段. 而接口中包含的方法都是抽象方法, 字段只能包含静态常量。 一个简单的接口代码示例 interface IShape { void draw(); } class Cycle implements IShape { Override public void draw() { System.out.println…

如何制作一本温馨的电子相册呢?

随着科技的不断发展&#xff0c;电子相册已经成为了一种流行的方式来记录和分享我们的生活。一张张照片&#xff0c;一段段视频&#xff0c;都能让我们回忆起那些温馨的时光。那么&#xff0c;如何制作一本温馨的电子相册呢&#xff1f; 首先&#xff0c;选择一款合适的电子相册…

绕过WAF(Web应用程序防火墙)--介绍、主要功能、部署模式、分类及注入绕过方式等

网站WAF是一款集网站内容安全防护、网站资源保护及网站流量保护功能为一体的服务器工具。功能涵盖了网马/木马扫描、防SQL注入、防盗链、防CC攻击、网站流量实时监控、网站CPU监控、下载线程保护、IP黑白名单管理、网页防篡改功能等模块。能够为用户提供实时的网站安全防护&…

Docker无法stop或者rm指定容器

Docker无法stop或者rm指定容器 今日准备重启一下docker 容器部署的 Nginx 时&#xff0c;使用的命令是 docker exec -it ir-nginx nginx -s reload 结果发现无法重启报错 然后想着关闭再启动&#xff0c;结果发现 docker restart 、docker stop 、docker kill 、docker exec 都…

STM32-15-DMA

STM32-01-认识单片机 STM32-02-基础知识 STM32-03-HAL库 STM32-04-时钟树 STM32-05-SYSTEM文件夹 STM32-06-GPIO STM32-07-外部中断 STM32-08-串口 STM32-09-IWDG和WWDG STM32-10-定时器 STM32-11-电容触摸按键 STM32-12-OLED模块 STM32-13-MPU STM32-14-FSMC_LCD 文章目录 STM…

基础—SQL—DQL(数据查询语言)条件查询

一、DQL—语法 SELECT 字段列表 FROM 表名 WHERE 条件列表; 注意&#xff1a;条件列表可以是一个&#xff0c;也可以是多个。 二、条件列表的一些构建形式 注意&#xff1a; 1、BETWEEN ... AND ... &#xff08;between 后面跟最小值&#xff0c;and 后面跟最大值&#xff0…

VxWorks PCI驱动

1 概述 PCI接口是一种DMA接口&#xff0c;通过DMA接口&#xff0c;CPU和外设能够进行内存的共享&#xff0c;这样CPU访问外设时只需要访问计算机系统的内存就可以了&#xff0c;这样做的一个重要的目的就是增加外部设备的自主性&#xff0c;在外部设备工作时可以不需要CPU的参与…

《QT从基础到进阶·四十一》无法解析的外部符号及生成事件加入QT打包命令报错问题

其他无法解析的外部符号&#xff1a; 无法解析的外部符号 "public: virtual struct QMetaObject const * __cdecl ML_AddinManger::metaObject(void)const "… 无法解析的外部符号 “public: virtual void * __cdecl ML_AddinManger::qt_metacast(char const *)” (?…

DynamiCrafter ComfyUI 教程 | 对图片转视频的效果进行精细化控制

近日&#xff0c;由北大、腾讯AI Lab联合推出的 AI 视频生成工具 DynamiCrafter 一经上线便引起了巨大反响。只需要输入一张普普通通的静态图&#xff0c;加上几句简单的文字引导&#xff0c;瞬间就能生成超逼真的动态视频&#xff0c;简直不要太厉害&#xff01; 静态图 fire…

数据结构汇总

等同于&#xff1a; 旋转的时候忽略Nil,选装完再加上。

小华半导体MCU方案选型和应用

小华半导体有限公司是中国电子信息产业集团有限公司旗下集成电路业务平台华大半导体有限公司的核心子公司&#xff0c;目前团队规模约300人&#xff0c;其中75%以上为研发人员&#xff0c;国内细分行业规模最大&#xff0c;核心骨干拥有国际MCU大厂25年以上从业经验。 小华半导…

风险投资公司正在帮助小投资者购买Anthropic、OpenAI等热门公司的股票

近年来&#xff0c;风险投资公司对于人工智能&#xff08;AI&#xff09;领域的公司&#xff0c;如Anthropic、Groq、OpenAI等&#xff0c;表现出了极高的投资热情。这些公司因为它们在AI技术方面的创新而备受瞩目。但是&#xff0c;对于很多小投资者来说&#xff0c;由于资金有…

vmware将物理机|虚拟机转化为vmware虚机

有时&#xff0c;我们需要从不同的云平台迁移虚拟机、上下云、或者需要将不再受支持的老旧的物理服务器转化为虚拟机&#xff0c;这时&#xff0c;我们可以用一款虚拟机转化工具&#xff1a;vmware vcenter converter standalone&#xff0c;我用的是6.6的版本&#xff0c;当然…