【CSS3】---颜色RGBA及渐变色
颜色之RGBA
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。
语法：
color：rgba(R,G,B,A)
R、G、B三个颜色参数，正整数值的取值范围为：0 - 255。
百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
A为透明度参数，取值在0~1之间，不可为负值。
代码示例：
background-color:rgba(100,120,60,0.5);
渐变色彩
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
这一小节我们来说一下线性渐变：
参数：
第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：
（单击图片可放大）
第一个参数省略时，默认为“180deg”，等同于“to bottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
效果图：
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css"> p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: #000;
font-size:24px;
background-image:linear-gradient(to top left,red,green,blue,yellow,black,white);
}
</style>
</head>
<body>
<p>右下角向左上角的线性渐变背景</p>
</body>
</html>
效果：
【CSS3】---颜色RGBA及渐变色的更多相关文章
- CSS3颜色特征温故
网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...
- css3 颜色记
css3 颜色 opacity 使元素呈现出半透明效果. opacity:alphavalue || inherit alphavalue:默认值为1,可以取0~1任意浮点数.取值为1时,元素完全不透 ...
- 使用IE滤镜实现css3中rgba让背景色透明的效果
让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div ...
- CSS3 之 RGBa 可透明颜色
在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这 ...
- 熟悉css/css3颜色属性
颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...
- CSS3 颜色属性
关键字颜色 red 十六进制颜色 #FF0000 RGB颜色 rgb(255,0,0) 新增的颜色表示方法 RGBa: RGB代表光的三原色,Red.Green和Blue CSS3中可以增加一个值 ...
- CSS3：RGBA的使用方法
1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...
- css3 -- 颜色与不透明度
1.opacity: opacity的值会被它的所有子元素继承,也就是说不可能让一个元素比他的父元素更加不透明,但你可以让他变得更透明点 Firefox Webkit Opera支持,注意IE 2 ...
- css3整理--rgba
rgba语法: rgba(0, 0, 0,0.5); 第一个参数:R 红色(0-255) 第二个参数:G 绿色(0-255) 第三个参数:B 蓝色(0-255) 第四个参数:透明度(0-1)使用rgb ...
随机推荐
- Ubuntu ENet 的下载和编译
ENet的目的是提供一个相对轻便.简单和强大的网络通信层的UDP(用户数据报协议). 它提供的主要功能是可选的.可靠的.顺序的数据包发送. ENet省略了一些更高层次的网络功能,如身份验证.加密,尤其 ...
- 使用 Protocol Buffers 代替 JSON 的五个原因
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- java学习路线(好资源大家分享)
对于入门java将近两年的时间,曾经迷惘过,一直想知道java的具体学习路线,看过了许许多多的java经验分享的帖子,评论,以及其他各种培训机构所谓的学习路线,发现没有一个符合我个人需求的学习路线,根 ...
- 试读《基于MVC的JavaScript Web富应用开发》
前两年做jsp开发时,用了不少JavaScript(JS)和Ajax, 最近的项目一直在使用Flex做前台,虽然也有类似的ActionScript实现JS的功能,但没想到的是,短短几年JS发展如此迅速 ...
- HDU 4278 Faulty Odometer 8进制转10进制
Faulty Odometer Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...
- C#窗体钉在桌面、置底、嵌入桌面的办法
想做一个桌面时钟,钉在桌面上不影响正常使用,只在看桌面的时候显示. 从网上多方寻找找到这么个代码,但是还是有不方便的地方,大家探讨一下. 这个程序在使用“显示桌面”的时候还可以显示,将程序的Form1 ...
- 搭建Spring + SpringMVC + Mybatis框架之一（创建项目）
创建项目 用maven管理项目很方便,不用手动下载jar包,直接在pom.xml配置文件中,maven可以帮助我们自动下载,非常方便 新建一个web project,添加maven支持就可以了,这样创 ...
- HTML WEB 和HTML Agility Pack结合
现在,在不少应用场合中都希望做到数据抓取,特别是基于网页部分的抓取.其实网页抓取的过程实际上是通过编程的方法,去抓取不同网站网页后,再进行分析筛选的过程.比如,有的比较购物网站,会同时去抓取不同购物网 ...
- 安装jasperwave出错
1.错误描写叙述 2.错误原因 无法下载"com.jasperwave.engine_1.1.0.jar",须要又一次下载 3.解决的方法 将"com.jasperwav ...
- Java RESTful Web Service相关概念
原文地址:http://1.liangtao.sinaapp.com/?p=647 接上一篇文章REST|RESTful初步认识:p=639">http://1.liangtao.si ...