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

随机推荐

Educational Codeforces Round 15 (A - E)
比赛链接:http://codeforces.com/contest/702 A. Maximum Increase A题求连续最长上升自序列. [暴力题] for一遍,前后比较就行了. #inclu ...
API基础开发学习网址
http://www.cnblogs.com/shanyou/category/307401.html http://www.cnblogs.com/beginor/archive/2012/03/1 ...
为什么 JavaScript 中基本数据类型拥有 toString 之类方法？
在 JavaSctipt 启示录一书中,关于为什么 JS 中基本数据类型可以调用一堆对象方法.大意即指,当原始数据类型(boolean,Number.String)在调用方法时,JS 将会创建对象,以 ...
C#的图片拼接
貌似很长时间没有写博客了,感觉再不写都要废了. 这段时间确实迷茫得不行,整天混混顿顿的,逃避这个逃避那个,话说已经辞职一个月了…… 这几天在学用libgdx做安卓上的游戏,感觉缺少一个图片拼接的工具, ...
Codeforces Round #334 (Div. 2) D. Moodular Arithmetic 环的个数
D. Moodular Arithmetic Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/60 ...
android开发之Fragment加载到一个Activity中
Fragments 是android3.0以后添加的.主要是为了方便android平板端的开发.方便适应不同大小的屏幕.此代码是为了最简单的Fragment的使用,往一个Activity中添加Frag ...
MySQL 高可用MHA安装部署以及故障转移详细资料汇总转
http://blog.itpub.net/26230597/cid-87082-list-2/ 1,简介 .1mha简介 MHA,即MasterHigh Availability Manager a ...
哈夫曼(Huffman)编码
哈夫曼编码(Huffman Coding)是一种非常经典的编码方式,属于可变字长编码(VLC)的一种,通过构造带权路径长度最小的最优二叉树以达到数据压缩的目的.哈弗曼编码实现起来也非常简单,在实际的笔 ...
Spket在Eclipse/MyEclipse下的安装和配置支持Ext（图文教程)
一.安装Spket 第一种方法:网上更新方式 1.插件首页:http://www.spket.com2.插件名称:Spket IDE3.更新连接(Update Site):http://www.spk ...
sed程序
程序1: 实现简单的shell sed替换功能程序2:修改haproxy配置文件 1.查输入:www.oldboy.org 获取当前backend下的所有记录 2.新建输入: arg = { ...

css3 颜色记