【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 ...
随机推荐
- OBD Experts OBD II Software OBD II Protocol Stack
http://www.obdexperts.co.uk/stack.html OBD II Software OBD Experts can provide you with ready to use ...
- KVO机制
KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用来监测对象的某些属性的实时变化情况并作出响应 首先,假设我们的目标是在一个UITableViewController内 ...
- 广州项目实施步骤II_练习配置HaProxy的重定向负载均衡
CentOS6.4 配置Haproxy Haproxy下载地址:http://pan.baidu.com/share/link?shareid=1787182295&uk=18290183 ...
- UVA 12904 Load Balancing 暴力
Load Balancing Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/vi ...
- 使用foreach碰到的问题
foreach($list as $k=>$v ){ ........... } 和下面: foreach($list as &$v){ ........ } 其实两者的结果是一样的,但 ...
- Fox Roddick interviw Federer before 2013 US Open
talk about Mike Jordan , talk about Tiger Woods, their competitor when people discuss you I love wi ...
- Android ListView标题置顶效果实现
一. 有图有真相 二.实现: 1. 基于ListView分类效果 2. TitleView即标题的处理(创建) 3. 处理TitleView的三种状态 三.源码: 例子下载 实现可以看代码,具 ...
- Android闹钟【复杂版】
最近做闹钟,所以自己写了个Demo版本,这个程序是用listview单独的类来实现的,和activity类分开来实现的!这个是用数据库进行更新的,当闹钟设置后,闹钟图片变成闹钟的样子,闹钟取消后,图片 ...
- 【Animation】 使用handler和Runnable实现某一个控件的抖动效果
布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tool ...
- TOJ3650 Legal or Not
Legal or Not Time Limit(Common/Java):1000MS/3000MS Memory Limit:65536KByte Total Submit: 41 ...