CSS3颜色不透明度如何设置?
web前端技术包含HTML和CSS样式,两者是相辅相成的,学习CSS样式不必可少,那么在学习CSS样式中,CSS3颜色不透明度如何设置?在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00)、rgb模式颜色、或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度。在CSS3中新增了两种设置颜色不透明度的方法,一种是使用rgba模式设置,另一种是使用opacity属性设置。下面将详细讲解两种设置方法。
1. rgba模式
rgba是CSS3新增的颜色模式,它是rgb颜色模式的延伸。rgba模式是在红、绿、蓝三原色的基础上添加了不透明度参数,其语法格式如下。
rgba(r,g,b,alpha);
上述语法格式中,前三个参数与RGB中的参数含义相同,括号里面书写的是rgb的颜色色值或者百分比,alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的数字。
例如,使用rgba模式为p标签指定透明度为0.5,颜色为红色的背景,代码如下。
p{background-color:rgba(255,0,0,0.5);}
或
p{background-color:rgba(100%,0%,0%,0.5);}
2. opacity属性
opacity属性是CSS3的新增属性,该属性能够使任何元素呈现出透明效果,作用范围要比rgba模式大得多。opacity属性的语法格式如下。
opacity:参数;
上述语法中,opacity属性用于定义标签的不透明度,参数表示不透明度的值,它是一个介于0~1之间的浮点数值。其中,0表示完全透明,1表示完全不透明,而0.5则表示半透明。
CSS3颜色不透明度如何设置?以上就是小编的详细介绍,希望上面的介绍能够给大家带来帮助!
本文来自千锋教育,转载请注明出处。
CSS3颜色不透明度如何设置?相关推荐
- CSS3颜色不透明度如何设置
web前端技术包含HTML和CSS样式,两者是相辅相成的,学习CSS样式不必可少,那么在学习CSS样式中,CSS3颜色不透明度如何设置?在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00) ...
- css透明度为0.2是什么颜色,CSS3颜色不透明度的设置方法【web前端】
在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00).rgb模式颜色.或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度.在CSS3中新增了两种设置颜色不透明度的方法,一种 ...
- html怎么设置颜色透明,CSS3如何设置颜色不透明度?
在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00).rgb模式颜色.或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度.在CSS3中新增了两种设置颜色不透明度的方法,一种 ...
- css3hlsa,CSS3颜色,文字,文本部分常用属性
当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 CSS3颜色表示方法: 1.颜色名称 2.十六进制 3.RGB方式 (r,g,b) 4.RGBA (支持透明)(r,g,b,a) 5.HLS ...
- php里面怎么设置边框颜色,css怎么设置div边框颜色
css设置div边框颜色的方法:首先创建一个HTML示例文件:然后定义一个div:最后通过给该div添加"border-color"或者"border-left-colo ...
- css3颜色渐变:css3如何实现背景颜色渐变?
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
- linux ls文件颜色和底色设置
转帖 : linux ls文件颜色和底色设置 白色:表示普通文件 蓝色:表示目录 绿色:表示可执行文件 红色:表示压缩文件 浅蓝色:链接文件 红色闪烁:表示链接的文件有问题 黄色:表示设备文件 灰色: ...
- [css] 如何使用css3实现一个div设置多张背景图片?
[css] 如何使用css3实现一个div设置多张背景图片? background-image:url("1.jpg"),url("2.jpg"),url(&q ...
- html边框自动变颜色,css怎么设置边框颜色?
元素外边距内就是元素的的边框 (border).元素的边框就是围绕元素内容和内边据的一条或多条线.每个边框有 3 个方面:宽度.样式,以及颜色.下面我们就来看一下css设置边框颜色的方法. css可以 ...
- 用css3的@keyframes里设置transform:rotate(); 当控制动画暂停:animation-play-state:paused暂停,在微信和safari里无效...
用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animation-play-state:paused(暂停)|running(运动) ...
最新文章
- vscode css智能补全_强大的 VS Code入门
- ssm插入数据时候栈溢出_大话数据结构笔记(4)
- 我们对时间的理解错了吗?
- MyBatis(三)——动态SQL
- boost::safe_numerics::checked_result相关的测试程序
- linux之进程间通信--使用信号
- (译)你应该知道的jQuery技巧
- 编码规范 | Java函数优雅之道(下)
- Altium Designer20原理图绘制
- 从Oracle到PostgreSQL:一文掌握Checkpoint重要概念
- HttpHelper使用记录
- android computescroll_【Android】Scroller分析
- 数组类型和多维数组的本质
- risc-v gcc 编译 atomic 指令时产生 illegal operands 错误的解决办法
- 彩虹Ds网手机商城系统模板源码
- 我们说运营,到底是在说运营什么?
- Laravel验证器的使用
- 51单片机入门——Keil uVision4的使用
- 网络协议丨FTP协议和P2P协议
- 病毒分析报告-熊猫烧香