css透明度属性简介
一、透明度设置
- opacity
用法:
opaticy:0-1;
2.rgba
用法:
rgba:(0-255,0-255,0-255,0-1)
透明度取值均为0-1之间。其中,0代表完全透明,1代表完全不透明。
注:若取值超出范围(小于0或大于1),那么会就近取合法值。如取1.2则按1显示,取负数按0显示。
举例:
html:
css:
(img)
我们将上例子中的opacity改为rgba再看
```
css:
.box1{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 1);}
.box2{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0.5);}
.box3{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0);}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JW0lzFqi-1583117743352)(https://i.loli.net/2020/03/01/Zr1d7BPEQ8MOsi3.png)]
二、透明度属性
仔细观察上面两个例子,会发现opacity设置为0时其内部的文字也不显示了,但是rgba设置为0其内部文字依然显示。
我们给元素设置opacity时,其内部元素会和父元素有同样的透明度,当父元素透明度为0时,其内部元素透明度均为0。
举例:
~~ \`\`\` (img)
我们可以将opacity理解为元素变成一块透明玻璃,其值为0时全透明不可见,几块颜色不同的元素叠放在一起可以改变叠加部分的颜色。
千锋逆战班,等你来战。
css透明度属性简介相关推荐
- html页面透明度属性,css透明度属性是什么?
css透明度属性是什么?CSS透明度属性是opacity属性.下面本篇文章就来给大家介绍一下CSS 透明度属性--opacity属性.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- html中align属性的justify,css text-align属性简介说明
摘要: 下文讲述css属性text-align的功能简介说明,如下所示: css text-align属性功能说明 css text-align属性功能: 设置html标签中内容的水平对齐方式 tex ...
- CSS margin 属性简介
CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做 ...
- html页面透明度属性,css透明度是什么属性?
css透明度属性指的是opacity属性:opacity属性可以设置一个元素了透明度级别.下面本篇文章就来给大家介绍一下CSS opacity属性,有一定的参考价值,有需要的朋友可以参考一下,希望对大 ...
- 前端:CSS/09/行内框架,CSS简介,CSS选择器,组合选择器,CSS注释,CSS尺寸属性,CSS字体属性,CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
- CSS pointer-events属性的使用
楔子 在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉.其中动画是最常用的方法. 这里的需求是,弹层的设计,这个弹层希望可以像 native 上的弹层 ...
- css 计算属性的应用_如何使用一点CSS Grid魔术设计计算器应用
css 计算属性的应用 by Deepika Gunda 由Deepika Gunda 如何使用一点CSS Grid魔术设计计算器应用 (How to use a little CSS Grid ma ...
- [css] css的属性content有什么作用呢?有哪些场景可以用到?
[css] css的属性content有什么作用呢?有哪些场景可以用到? content属性与 ::before 及 ::after 伪元素配合使用生成文本内容通过attr()将选择器对象的属性作为字 ...
- [css] scroll-snap-align属性的应用场景是什么?
[css] scroll-snap-align属性的应用场景是什么? 滚动一个列表时,控制列表中一个块始终完全在可视区内,如果滚动到一半可以回弹,保持整个块都在可视区. 个人简介 我是歌谣,欢迎和大家 ...
最新文章
- 转载 干货 | 陪伴我学习NLP、知识图谱的那些资源(教程+书籍+网站+工具+论文...可以说很全面了)
- UOJ37. 【清华集训2014】主旋律
- 【实例】去哪儿搜索实例实现
- react获取state的值并更新使用
- python exe文件运行依赖环境_python将py代码文件转换为EXE脱离环境运行
- Huawei S8512
- 【翻译】.NET 5 Preview8发布
- 疯狂java的第四章答案_疯狂java讲义第四章第一题
- linux密码忘记重新设置密码
- 用c语言求定积分实验报告,C语言用六种方法求定积分.doc
- 快讯 | 科技部公布首批国家人工智能创新平台名单,BAT+科大讯飞入选
- oracle 分组统计效率,Oracle 分组求和函数(rollup、cube、grouping sets)
- Oracle存储过程打印输出错误信息、行号,快速排查
- Mac配置LNMP开发环境全记录 一看就懂系列
- PaddleOCR 识别数据制作
- Q learning
- 程序 = 数据结构 + 算法?真的是这样的吗?
- finalshell连接ubantu
- 程序:摄氏度和华氏度的相互转化
- java版溺尸掉三叉戟吗_我的世界1.13通用水鬼塔经验农场(刷三叉戟农场)【内有存档】...