前端demo:实现背景半透明,div与文本正常显示

一、需求:

背景实现透明度0.3,其他组件正常显示

二、代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>html,body,#ele-body {width: 100%;height: 100%;margin: 0;padding: 0;}#ele-body {position: relative;}#ele-one {opacity: 0.3;position: absolute;width: 100%;height: 100%;background-color: orange;}#ele-two {position: absolute;width: 300px;height: 300px;text-align: center;line-height: 300px;background-color: blueviolet;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}
</style><body><div id="ele-body"><div id="ele-one"></div><div id="ele-two">春有百花秋有月</div></div>
</body></html>

效果显示:

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

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

相关文章

天池 在线编程 布尔表达式求值(栈)

文章目录1. 题目2. 解题1. 题目 https://tianchi.aliyun.com/oj/245679029019779851/254275128279634588 给定一个字符串代表一个仅包含"true","false","or","and"的布尔表达式。 你的任务是将这个表达式的值求出&#xff0c;返回&q…

Schema详解

XML Schema 简介XSD 为何使用XML Schema 是基于 XML 的 DTD 替代者。XML Schema 可描述 XML 文档的结构。XML Schema 语言也可作为 XSD&#xff08;XML Schema Definition&#xff09;来引用。在继续学习之前&#xff0c;您需要对下面的知识有基本的了解&#xff1a;HTML / XHT…

整理总结一下:git恢复本地误删除的分支

一、使用git log -g查看日志&#xff0c;找回之前提交的commit,并记下commit_id git log -g 二、新建分支newbranch&#xff0c;把commit_id分支复制到新的分支上 git branch newbranch commit_id 三、切换新建分支newbranch&#xff0c;检查文件 git checkout newbran…

LeetCode 1074. 元素和为目标值的子矩阵数量(2d前缀和+哈希)

文章目录1. 题目2. 解题1. 题目 给出矩阵 matrix 和目标值 target&#xff0c;返回元素总和等于目标值的非空子矩阵的数量。 子矩阵 x1, y1, x2, y2 是满足 x1 < x < x2 且 y1 < y < y2 的所有单元 matrix[x][y] 的集合。 如果 (x1, y1, x2, y2) 和 (x1, y1, x2…

判断平台是windows还是linux,用这个方法就行了

一、需求&#xff1a; 因为代码是在windows上写的&#xff0c;但是需要部署到linux上&#xff0c;所以有些文件路径是不一样的&#xff0c;那么该怎么解决呢 二、解决方法&#xff1a; python是跨平台的。在Windows上&#xff0c;文件的路径分隔符是\&#xff0c;在Linux上是…

最炫国漫《雾山五行》用 Python 了解一下到底有多优秀

看动漫的小伙伴应该知道最近出了一部神漫《雾山五行》&#xff1a; 1、极具特色的水墨画风和超燃的打斗场面广受好评 2、首集播出不到 24 小时登顶 B 站热搜第一&#xff0c;豆瓣开分 9.5&#xff0c; 火爆程度可见一斑&#xff0c;就打斗场面而言&#xff0c;说是最炫动漫也…

LeetCode 982. 按位与为零的三元组(位运算+计数)

文章目录1. 题目2. 解题1. 题目 给定一个整数数组 A&#xff0c;找出索引为 (i, j, k) 的三元组&#xff0c;使得&#xff1a; 0 < i < A.length 0 < j < A.length 0 < k < A.length A[i] & A[j] & A[k] 0&#xff0c;其中 & 表示按位与&…

Windows下免费软件的首选推荐

PS&#xff1a;以下按装机顺序排列&#xff0c;“|”号后面是备选软件。 启动引导&#xff1a;EasyBCD 虚拟机&#xff1a;VirtualBox Linux&#xff1a;Zorin | Linux Mint(Mate) | Ubuntu 驱动工具&#xff1a;驱动精灵 | 鲁大师 虚拟光驱&#xff1a;DAEMON Tools Lite 系统…

雷军一往无前的十年(小米十周年公开演讲)附赠《一往无前》电子书籍

▲雷军 | 中国企业家俱乐部理事、小米科技董事长 做全球最好的手机&#xff0c;只卖一半的价钱&#xff0c;让每个人都能买得起——如何能够实现这个看上去、听上去都不靠谱的目标&#xff1f; 来源 | 雷军公众号分享 | 雷军 2020年8月11日19:30&#xff0c;小米十周年&#x…

LeetCode 1147. 段式回文(贪心)

文章目录1. 题目2. 解题1. 题目 段式回文 其实与 一般回文 类似&#xff0c;只不过是最小的单位是 一段字符 而不是 单个字母。 举个例子&#xff0c;对于一般回文 "abcba" 是回文&#xff0c;而 "volvo" 不是&#xff0c;但如果我们把 "volvo"…

利用python批量修改文件名称

一、基础知识&#xff1a; 通过查阅资料os模块中rename和renames都可以做到 他们的区别为.rename:只能修改文件名 renames:可以修改文件名,还可以修改文件上级目录名称 另一个用到的方法是os.listdir(path) path为路径 此方法可以将指定路径文件夹中的文件名录入一个列表…

多个域名向主域名自动跳转的Nginx配置

if ($host "bbs.umiwi.com"){ rewrite ^/(.*)$ http://bbs.youmi.cn/$1 permanent; } 多个域名向主域名自动跳转的Nginx配置&#xff0c;可用于URL搜索引擎优化等。nginx语法检测特别严格&#xff0c;if和后面括号以及变量等号这些元素都要有空格&#xff0c;否则会…

LeetCode 464. 我能赢吗(状态压缩+记忆化递归 / 博弈)

文章目录1. 题目2. 解题1. 题目 在 “100 game” 这个游戏中&#xff0c;两名玩家轮流选择从 1 到 10 的任意整数&#xff0c;累计整数和&#xff0c;先使得累计整数和达到或超过 100 的玩家&#xff0c;即为胜者。 如果我们将游戏规则改为 “玩家不能重复使用整数” 呢&…

简单聊一聊Python工程师任职要求及未来发展方向

一、不同阶段Python工程师任职要求及标准 1、新手入门 任职要求&#xff1a; 熟练掌握python编程语言&#xff0c;熟悉flask或django开发框架者&#xff1b; 一名Python开发工程师的职业规划 熟练使用Windows系统&#xff0c;能使用Word&#xff0c;Excel&#xff0c;Powe…

总结python换源的方法:Linux与windows系统

一、命令行方式&#xff1a; 1、清华源地址&#xff1a; 可以在使用pip的时候加参数-i https://pypi.tuna.tsinghua.edu.cn/simple 例如&#xff1a;pip install -i https://pypi.tuna.tsinghua.edu.cn/simple gevent&#xff0c;这样就会从清华这边的镜像去安装gevent库。 …

LeetCode 880. 索引处的解码字符串(找规律)

文章目录1. 题目2. 解题1. 题目 给定一个编码字符串 S。请你找出 解码字符串 并将其写入磁带。 解码时&#xff0c;从编码字符串中 每次读取一个字符 &#xff0c;并采取以下步骤&#xff1a; 如果所读的字符是字母&#xff0c;则将该字母写在磁带上。如果所读的字符是数字&a…

C、C++ 学习经历

1、可以考虑先学习C。 大多数时候&#xff0c;我们学习语言的目的&#xff0c;不是为了成为一个语言专家&#xff0c;而是希望成为一个解决问题的专家。做一个有用的程序员&#xff0c;做一个赚钱的程序员。我们的价值&#xff0c;将体现在客户价值上&#xff0c;而不是语言写得…

python中遇到循环import即circular import的问题原理剖析及解决方案

在python中常常会遇到循环import即circular import的问题&#xff0c;今天主要给大家介绍了关于Python中循环引用&#xff08;import&#xff09;失败的解决方法&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;需要的朋友可以参考借鉴。 一、前言 最近在开发智能家居…

LeetCode 1711. 大餐计数(map计数 + 二分查找)

文章目录1. 题目2. 解题1. 题目 大餐 是指 恰好包含两道不同餐品 的一餐&#xff0c;其美味程度之和等于 2 的幂。 你可以搭配 任意 两道餐品做一顿大餐。 给你一个整数数组 deliciousness &#xff0c;其中 deliciousness[i] 是第 i​​​​​​​​​​​​​​ 道餐品的美…

node.js初入手

今天突然看到《node.js开发指南》的pdf文件&#xff0c;感觉封面不错&#xff0c;就看看。发现写的挺好的。 一、mac下安装 http://nodejs.org/download/ //官网下载mac版 二、用npm安装supervisor (检测修改&#xff0c;则重启node进程) sudo npm install -g supervisor //…