background:rgba()
RGB就是红色R+绿色G+蓝色B,RGBA说得简单一点就是在RGB的基础上加进了一个通道Alpha.
语法: 以上R、G、B三个参数,正整数值的取值范围为:0 - 255。
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数| 百分数
A:透明度。取值0~1之间
取值:
:Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
:Saturation(饱和度)。 取值为0%到100%之间的值;
:Lightness(亮度)。 取值为0%到100%之间的值;
:alpha(透明度)。 取值在0到1之间;
说明:
RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。
浏览器的兼容性:
如果庞统说rgba是制作透明色(透明背景色、透明边框色、透明前景色等),大家不由会想起opacity 这个东西。他在我们CSS2中制作背景色通常用到,可是要用他来制作边框色或都说前景色的话,那他就只能在边上站着了,有心无力呀。
前景色: :before{content:”;position:absolute;top:0;left:0;width:100%;height:100%}
background: rgba(255,255,0,1);
opacity透明度:对后代会有影响
background: rgb(255,255,0);
opacity: 1;
filter:alpha(opacity=100);
background:rgba()相关推荐
- CSS 背景(background)(背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例)
1. 背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的 示例代码: <!DOCTYPE html> <html lang ...
- 兼容ie8 rgba()用法
滤镜filter的用法 在一个页面中设置一个半透明的白色div. [css] view plaincopy background: rgba(255,255,255,.1); 但是ie8不支持rgba ...
- 妙用 background 实现花式文字效果
本文将讲解如何利用 background 系列属性,巧妙的实现一些花式的文字效果.通过本文,你将可以学到: 通过 background-size 与 background-position 实现酷炫的 ...
- rgba的兼容性 IE
2019独角兽企业重金招聘Python工程师标准>>> rgba的兼容性 background:rgba(0,0,0,0.5); filter: progid:DXImageTran ...
- ie6+7+8等对background-color:rgba(),background-img渐变的兼容
一,ie8兼容rgba()的解决办法 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255, ...
- CSS基础——CSS 背景(background)【学习笔记】
1 背景颜色(color) 语法: background-color:颜色值; 默认的值是 transparent 透明的 2 背景图片(image) 语法: background-image : n ...
- backgroud背景色样式兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
- html透明颜色值,css中透明色的颜色值(rgb/rgba)
对于RGB比较常见,显示器.电视等都是采用RGB的颜色标准.RGB是工业界的一种颜色标准,通过R(红).G(绿).B(蓝)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色.我们知道计算机是 ...
- CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
最新文章
- 警告: deleting object of polymorphic class type which has non_virtual destructor
- android 打卡app,日常小打卡app
- dataframe的multiIndex在次级index上做筛选
- php网站挂linux,Linux环境下php实现给网站截图的方法
- C# WINFORM中的combobox.items.add实现像web开发那样,添加显示内容text和实际value值
- Ocelot统一权限验证
- 2021中国餐饮行业数字化调研报告
- 历史上杀伤力最大的笑话!!!
- Android Studio 基础知识
- VS2015sql本地服务器为空,详解VS2015自带LocalDB数据库用法实例
- html幻灯片气泡,jQuery炫酷气泡缩略图幻灯片画廊插件
- [phaser3入门探坑]使用phaser3制作山寨马里奥
- app接口制作简单流程
- 万里汇WorldFirst支持从PayPal提现美元(实战教程)
- 深入了解Spring IoC
- 三国演义网页游戏私服架设教程
- 50天用JavaScript完成50个web项目,我学到了什么?
- C语言——PTA 用格里高利公式求给定精度的PI值
- 知之者不如好之者 好之者不如乐之者
- 【NiFi系列】1-基本介绍