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中可以增加一个值 ...

随机推荐

codeforces 630D Hexagons!
D. Hexagons! time limit per test 0.5 seconds memory limit per test 64 megabytes input standard input ...
DATASNAP 自增长字段问题
mssql数据表中包含有自动增值字段khid,类型为identify(1,1),且为表的主关键字; 在程序中修改和删除都没有问题,但增行时,增行总是提示错误'key violation'! 如何取消这 ...
java tools: jstack
SYNOPSIS jstack [ option ] pidclick here to see other detail If the given process is running on a 64 ...
最大流&最小割 - 专题练习
[例1][hdu5889] - 算法结合(BFS+Dinic) 题意 \(N\)个点\(M\)条路径,每条路径长度为\(1\),敌人从\(M\)节点点要进攻\(1\)节点,敌人总是选择最优路径即最短路 ...
又遇BUG-ORA-01148：数据文件忽然变为recover状态
现象: RAC环境,数据文件状态变为recover,查看alert日志有如下报错: Wed Jun 26 02:31:03 2013 Thread 1 advanced to log sequence ...
shape中的属性大全
首先,看看事例代码 <shape>  <solid android:color="#ff9999"/> <!-- 渐 ...
.NET通用权限系统快速开发框架
DEMO下载地址: http://download.csdn.net/detail/shecixiong/5372895 一.开发技术:B/S(.NET C# ) 1.Windows XP以上 (支援 ...
【转】Android WebRTC 音视频开发总结（一）
http://www.cnblogs.com/lingyunhu/p/3578218.html 本系列文章主要总结和分享WebRTC开发过程中的一些经验,转载请说明出处(博客园RTC.Blacker) ...
如何将mysql表结构导出成Excel格式的（并带备注）
http://www.liangchan.net/liangchan/4561.html 1.使用一个mysql管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想 ...
Spring-AOP和AspectJ的区别和联系
AOP是Spring框架的重要组成部分.目前我所接触的AOP实现框架有Spring AOP还有就是AspectJ(还有另外几种我没有接触过).我们先来说说他们的区别: AspectJ是一个比较牛逼的A ...

css3 颜色记