css3 颜色

opacity

　　使元素呈现出半透明效果。

opacity:alphavalue || inherit

　　alphavalue:默认值为1，可以取0~1任意浮点数。取值为1时，元素完全不透明；取值为0时，元素完全透明。不能为负值。

　　inherit:表示继承父元素的opacity设置的值。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div{

       width:100px;

       height:100px;

       background:#ff0000;

       border:1px solid;

       opacity:0.3;

    }

</style>

</head>

<body>

	<div>胸无大志者，必受制于人</div>

</body>

</html>

　　opacity使整个元素，包括背景色与前景色都透明了。

RGBA

　　rgb颜色模式(也称三原色)是工业界的一种颜色标准，通过对红(red),绿(green)，蓝(blue)三个颜色通道的变化以及它们相互之间的叠加得到各种颜色。在css3中，rgba在rgb基础上增加了控制alpha透明度的参数。

rgba(r,g,b,a)

　　r:红色值，其取值可以是正整数或者百分值。

　　g:绿色值，其取值可以是正整数或者百分值。

　　b:蓝色值，其取值可以是正整数或者百分值。

　　a:alpha透明值，其取值在0~1之间。

　　以上r,g,b三个参数，正整数值的取值范围在0_{255；百分数值的取值范围在0%}100%。超出范围的数值将截至其最近的取值极限。a参数的取值范围在0~1。四个参数值都不能为负值。

div{

   width:100px;

   height:100px;

   background:rgba(255,0,0,0.3);

   border:1px solid;

}

　　与opacity类似，都使元素透明，唯一不同的是rgba只透明了元素的背景色，前景色仍然保持原样。

HSL

　　hsl和rgb一样，同属于工业界的一种颜色标准，通过对色调(hue)，饱和度(saturation)，亮度(lightness)三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。

hsl(h,s,l)

　　h:色调。取整数值，可以为任意整数，其中0(或360或-360)表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红。当它们的值大于360时，实际的值等于该值除360之后的余数。

　　s:饱和度。颜色的深浅度和鲜艳程度，取百分数，可以取值为0%~100%之间的任意值，其中0%表示灰度，100%表示饱和度最高。

　　l:亮度。取值和饱和度一样，0%最暗，100%最亮。

div{

   width:100px;

   height:100px;

   background:hsl(360,80%,80%);

   border:1px solid;

}

HSLA

　　hsla是hsl的扩展模式，在hsl的基础上增加了一个透明通道alpha来设置不透明参数。

hsla:(<length>,<percentage>,<percentage>,<opacity>)

div{

   width:100px;

   height:100px;

   background:hsla(360,50%,30%,0.5);

   border:1px solid;

}

　　css3颜色完。学习之路，不完

css3 颜色记的更多相关文章

CSS3颜色特征温故
网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...
CSS3变形记(上)：千变万化的Div
传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...
熟悉css/css3颜色属性
颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...
css3 渐变记
css3 渐变线性渐变径向渐变重复线性渐变重复径向渐变线性渐变线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...
css3 过渡记
CSS3 过渡 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. t ...
css3 文本记
css3 文本在css文本功能上主要分为三大类:字体,颜色和文本. text-shadow 设置文本阴影 text-shadow:color x-offset y-offset blur-radiu ...
css3 背景记
css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...
css3 边框记
css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...
CSS3 颜色属性
关键字颜色 red 十六进制颜色 #FF0000 RGB颜色 rgb(255,0,0) 新增的颜色表示方法 RGBa: RGB代表光的三原色,Red.Green和Blue CSS3中可以增加一个值 ...

随机推荐

TQMsgPack序列还原clientdataset.data
序列 procedure TForm1.Button2Click(Sender: TObject);var msgpack: TQMsgPack;begin msgpack := TQMsgPack. ...
Codeforces Round #271 (Div. 2) F. Ant colony (RMQ or 线段树)
题目链接:http://codeforces.com/contest/474/problem/F 题意简而言之就是问你区间l到r之间有多少个数能整除区间内除了这个数的其他的数,然后区间长度减去数的个数 ...
Javascript高级篇-Function对象
1.引入 1.1Function是基于原型的对象 2.创建Function对象 2.1 var myFun = new Function("参数一","参数二" ...
Weblogic安装
1.下载wls_121200.jar, 2.输入cnd打开命令提示 3.f:进入F盘 4.Java -version 验证是否配置Java环境, 5.echo %path% 查看环境变量 6.set ...
利用AssetsManager实现在线更新脚本文件lua、js、图片等资源（免去平台审核周期）
转自:http://www.himigame.com/iphone-cocos2dx/1354.html 首先说明一个问题: 为什么要在线更新资源和脚本文件!? 对于此问题,那要说的太多了,简单概括, ...
MVC4 EF6 MYSQL
在MVC的框架下连接mysql数据库将EF框架升级到EF6 将NEW JSON升级到与之相匹配的版本然后进行相应的配置就可以了
delphi 取得汉字的第一个字母
功能说明://取得汉字的第一个字母 function GetPYIndexChar( hzchar:string):char;begin caseWORD(hzchar[1])shl8+WORD(h ...
关于Android与pc通信时中文乱码的分析和解决
初步实现了Android与pc服务器的通信之后,又碰到了传说中令人头疼不已的中文乱码问题.既然出现了乱码,那么原因自然是协议不通了.我们知道eclipse中默认的编码标准是GBK,而安卓程序开发所默认 ...
【剑指offer】八皇后问题
转载请注明出处:http://blog.csdn.net/ns_code/article/details/26614999 剑指offer上解决八皇后问题,没实用传统的递归或非递归回溯法,而是用了非常 ...
AS3 Signals
在项目中,使用as3内置事件框架必须通过自定义事件才可以实现值的传递,大量自定义事件.定义常量和整个事件派发的管理.添加侦听器.移除侦听器,或多或少都会带来大量的代码,而signals这个框架思想原来 ...

css3 颜色记