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.mzph.cn/web/21389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud Consul基础入门与使用实践总结

【1】Consul简介 官网地址&#xff1a;https://www.consul.io/intro/index.html 下载地址&#xff1a;https://www.consul.io/downloads.html 中文文档&#xff1a;https://www.springcloud.cc/spring-cloud-consul.html ① 基础概念 Consul 是一套开源的分布式服务发现和…

网络编程(五)

网络编程&#xff08;五&#xff09; 网络服务器超时检测使用select进行超时检测套接字属性**getsockopt:获取socket软通道的某项属性值**setsockopt:设置socket软通道的某项属性值**&#xff08;socket建立之后就可使用&#xff09; 信号**signal()&#xff1a;信号处理函数se…

Android11 AudioTrack 创建过程

Android 系统播放声音&#xff0c;需要创建AudioTrack来和AudioFlinger通信&#xff0c;其创建过程如下 根据传入的声音属性得到output通过得到的output&#xff0c;找到播放线程AudioFlinger在播放线程内&#xff0c;创建Track&#xff0c;和AudioTrack对应。后续通过它们进…

低代码设计中的组织结构的作用与模式

一、组织结构的作用 在低代码设计中&#xff0c;组织结构是系统运作的基石&#xff0c;它定义了系统中的关键元素&#xff0c;包括人员、部门、角色&#xff0c;以及一人多部门、一人多部门多角色的复杂关系。这种定义不仅为系统提供了清晰的运行框架&#xff0c;还确保了系统…

这是一张单纯的图片

说明&#xff1a;通过简单的一张图片找到flag。 打开给出的图片&#xff0c;是一个卡通头像。 方法一&#xff1a; 使用notepad再次打开图片&#xff0c;最后一行发现一行编码。 通过给出的编码格式&#xff0c;可判断是ASCII编码。 使用Ascii编码解码工具&#xff0c;对这串…

贾英才医生:什么是脑白质病?如何预防此病?

贾英才医生&#xff0c;目前就任于北京崇文门中医医院&#xff0c;作为在医学领域有着深厚造诣和丰富经验的专业人士&#xff0c;在此深入探讨和剖析这样一个重要的医学话题&#xff1a;究竟什么是脑白质病&#xff1f;以及我们应该采取怎样切实可行的措施来有效预防此种疾病的…

计算机设备管理器端口不见了怎么办?

因为重装了系统&#xff0c;一切都得重新配置&#xff0c;但突然发现计算机资源设备里面端口这一选项居然不见了&#xff0c;这对一个嵌入式工程师是致命的&#xff0c;赶紧想想怎么处理 1、在电脑左下角windows右键&#xff0c;打开从上往下数第六个“资源管理器” 2、端口没…

Chrome 调试技巧

1. alert 在最早的时候&#xff0c;javascript 程序员调试代码都是通过 alert 进行&#xff0c;但 alert 会让整个程序被打断&#xff0c;并且还有一个很大的缺点&#xff0c;调试完成之后&#xff0c;如果忘记将 alert 删除 or 注释掉&#xff0c;导致别人访问该页面时会莫名…

迅狐短剧小程序源码:打造个性化的追剧体验

随着移动互联网的普及&#xff0c;短剧小程序源码的开发成为了影视爱好者的新宠。它不仅为用户提供了便捷的追剧体验&#xff0c;还通过推荐系统、观看历史、个性化喜好等特色功能&#xff0c;满足了用户的多样化需求。本文将深入探讨短剧小程序源码的特点、优势以及如何实现多…

创新指南|领导者如何评估自己的表现——麦肯锡专有的CEO卓越评估工具

CEO是任何组织中最具挑战性和要求最高的职位之一&#xff0c;尤其是在当前的经济环境下。这也是最重要的职位之一。研究表明&#xff0c;一家公司 45% 的业绩可归因于CEO的影响。但 CEO 们的实际表现如何&#xff1f;他们面临哪些问题&#xff1f;如何帮助他们发挥出最佳水平&a…

贝锐向日葵分组策略:减少重复操作,提升管理效率

面对大数量级的IT设备&#xff0c;如何高效实施管理是运维的关键所在&#xff0c;如何快速准确的对大量的设备按需分组&#xff0c;则是管理精准触达的第一步。 但是&#xff0c;传统的分组方式应付少量设备还可行&#xff0c;设备数量级一旦来到上千台甚至更多时&#xff0c;…

6.4 Go 映射(Map)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Java 异常处理详解(如果想知道Java中有关异常处理的知识点,那么只看这一篇就足够了!)

前言&#xff1a;异常处理是 Java 编程中非常重要的一部分&#xff0c;它能够有效地捕获和处理程序运行中的错误&#xff0c;提高代码的健壮性和可靠性。本文将深入探讨 Java 中异常的概念、体系结构、抛出、解决方式以及如何自定义异常&#xff0c;并结合代码案例进行详细解释…

mysql 如果有按照时间范围查询结果

1.前端传2024-06-21 到我们xml sql 文件中默认实际是 2024-06-21 00:00:00 <if test"dto.startTime ! null">and ps.created_at > #{dto.startTime}</if><if test"dto.endTime ! null">and ps.created_at < #{dto.endTime}</if…

Linux命令篇(六):vi/vim专项

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝您生活愉快&#xff01; 文章目录 一、什么是vim二…

Microsoft Outlook Lite 引入短信功能

随着科技的不断进步&#xff0c;我们的沟通方式也在不断演变。微软最新推出的 Outlook Lite 应用&#xff0c;不仅为我们提供了一个轻量级的电子邮件管理工具&#xff0c;现在更是带来了一项令人兴奋的新功能——短信服务。 Outlook Lite&#xff1a;轻量级&#xff0c;功能全…

今日好料推荐(ARM嵌入式)

今日好料推荐&#xff08;ARM嵌入式&#xff09; 参考资料在文末获取&#xff0c;关注我&#xff0c;获取优质资源。 给我留言&#xff0c;会帮大家寻找需要的资料。 ARM 嵌入式系统 嵌入式系统在现代电子设备中扮演着至关重要的角色&#xff0c;从智能手机到工业自动化&am…

深入了解 C 语言 Bug

目录 一、引言二、Bug的定义三、Bug的由来四、Bug的影响五、应对 Bug 的方法六、结论 一、引言 1、在 C 语言的编程世界中&#xff0c;Bug 是一个我们无法回避的话题。 2、Bug&#xff0c;简单来说&#xff0c;就是程序中存在的错误或缺陷。它可以表现为程序运行结果的异常、崩…

HALCON-从入门到入门-形态学操作-千变万化的region

1.废话 计算机视觉中的形态学操作是一种基本的数字图像处理技术&#xff0c;主要用于图像的形态结构改变&#xff0c;以便执行前后景分割、形状检测等任务。 膨胀&#xff08;Dilation&#xff09;&#xff1a; 膨胀操作是将结构元素在图像上滑动&#xff0c;如果结构元素与图…

CMakeFile.txt通过sysroot方式后生成makefile报错

报错信息如下&#xff1a; -- The C compiler identification is unknown -- The CXX compiler identification is unknown -- Check for working C compiler: /home/xj/asm/host/bin/aarch64-buildroot-linux-gnu-gcc -- Check for working C compiler: /home/xj/asm/host/bi…