css: opacity、transparent、rgba 区别
opacity
设置元素的不透明度
取值范围:0-1;其中
opacity:0; //元素完全透明(即元素不可见) 【盒子和盒子的内容都看不见】
opacity:1; //元素完全不透明(即元素后面的背景不可见)
opacity:0.5; //元素完全半透明(即元素后面的背景可见) 【取值0.0~1.0之间】
当opacity属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的opacity属性值。
transparent
【盒子的背景看不见】
颜色的一种,用来指定全透明色彩,即一个类似rgba(0,0,0,0)这样的值
查看:
transparent · CSS3开发文档 · 看云
<color> - CSS(层叠样式表) | MDN
RGBA
rgba 是代表Red(红色)Green(绿色)Blue(蓝色)和Alpha的色彩空间。
a 表示像素不透明性的值,取值0~1之间。0表示完全透明的像素,1表示完全不透明的像素。
区别:
1、opacity是作为一个完整属性出现的。transparent和rgba都是作为属性值出现的。
2、opacity是对整个元素起作用的。transparent和rgba是对元素的某个属性起作用的。
3、opacity和rgba设置的透明度可调(取值0-1之间)。若一个元素未设置opacity属性,那么它会从它的父元素继承opacity属性的值。而rgba不存在继承。
简单总结下opacity、transparent以及rgba - Francis_Li - 博客园
css: opacity、transparent、rgba 区别相关推荐
- CSS透明度之rgba和opacity的区别
在CSS样式中,设置透明度的方式有两种.其一,opacity:其二rgba(). opacity和rgba()在一定程度上是没什么区别. 一.怎么使用rgba和opacity 1.opacity 取值 ...
- opacity和rgba的区别
opacity和rgba都是css中设置透明度的方式. 文章目录 opacity属性 rbga属性值 opacity和rgba的区别 opacity属性 opacity 属性设置元素的不透明级别. 语 ...
- 亲爱的老狼-opacity、rgba、transparent的应用
1>opacity是透明色的一种,他是一种具有继承性的标签,它不仅会让背景色变的透明,还会造成所在盒子里的内容也透明.所以要慎用,不然,当想让子元素不再透明时,opacity.rgba.等均不具 ...
- css样式不透明,css属性transparent不透明问题解析
本文章来给各位同学介绍一下关于css属性transparent不透明问题解析,如果你碰到transparent有时候并不是透明的话可参考此方法来解决. 透明往往能产生不错的网页视觉效果,先奉上兼容主流 ...
- css opacity属性_CSS中的opacity属性
css opacity属性 CSS | 不透明度属性 (CSS | opacity Property) With the growing need of making websites, the ne ...
- html设置表单透明度,css利用transparent属性设置透明度的方法
css利用transparent属性设置透明度的方法 发布时间:2020-09-14 13:44:46 来源:亿速云 阅读:188 作者:小新 这篇文章主要介绍css利用transparent属性设置 ...
- css opacity影响子元素解决办法
css opacity影响子元素解决办法 设置父元素opacity:0.3,子元素不设置opacity,子元素也会有0.3的透明度.设置子元素opacity:1,子元素的opacity:1也是在父元素 ...
- 前端如何设置背景颜色的透明度 css中的 rgba() 函数详解 :background-color: rgba(255,192,203,0.3)
目录 前言 rgba() 函数 详解 再分享一个小技巧哈哈哈 前言 今天在开发移动端的时候感觉没背景颜色有点丑,再加上自己做的是蛋糕app,觉得暖色应该会很好看,于是就用了这行代码 backgroun ...
- CSS Display与Visibility区别和用法
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆,visibility和display两个属性都有隐藏元素的功能.visibility属性 ...
最新文章
- js 对动态添加的table 排序
- centos 7 安装docker 并设置阿里云镜像仓库
- ExtJs常用数据源store
- javascript功能_最新版本JavaScript仅具有2个新功能。 这是他们的工作方式。
- slf4j与logback的结合使用
- 7-227 PAT排名汇总 (25 分)
- struts2:表单标签
- K-摇臂赌博机算法与实现
- 手机vnc远程控制软件,手机vnc远程控制软件如何配置
- 技术分享 | Online DDL 工具 gh-ost
- 北京时间校准 服务器 显示器 标准,纯干货~北京时间校准显示器实用分享
- 手写BundleAdjustment(尽量仅使用eigen库)
- 黑鲨helo支持html吗,黑鲨游戏手机Helo发布 张大仙公布私人配置
- 录屏储存失败因为5823_屏幕录制存储失败因为5823
- 基于Geomesa服务查询轨迹数据无法根据空间和时间范围进行查询的问题解决办法
- WPF 控件 (二、按钮)
- JAVA SE 005——类型转换
- Linux:chmod命令
- 嵌入式 printf(\033[1;33m Hello World. \033[0m \n);有趣的串口之超级终端的玩法
- 搭建网站教程 小白教程 游戏搭建制作教程