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

随机推荐

POJ 3660 Cow Contest (Floyd)
题目链接:http://poj.org/problem?id=3660 题意是给你n头牛,给你m条关系,每条关系是a牛比b牛厉害,问可以确定多少头牛的排名. 要是a比b厉害,a到b上就建一条有向边.. ...
Protobuf一键生成代码bat文件
最近在摆弄Unity的Socket,需要用到Protobuf,一般都会有多个协议文件,所以研究了下bat的批处理,下面给出批处理文件代码: @echo off ::协议文件路径, 最后不要跟“\”符号 ...
Proactor设计模式：单线程高并发
Boost::Asio为同步和异步操作提供了并行支持,异步支持基于前摄器模式,这种模式的优点和缺点可能比只同步或反应器方法要低. 让我们检查一下Boost::Asio是如何实现前摄器模式的,没有引用基 ...
Castle框架中的IOC和AOP机制
反转控制(IOC)和面向切面编程(AOP)技术作为当前比较流行的技术,其优势已受到广泛关注,但是这两项新技术在实际项目上的应用研究却很落后,而且在.NET平台下实现这两项技术没有形成可以广泛套用的框架 ...
Autofac实例生命周期
1.默认,每次请求都会返回一个实例 builder.RegisterType<X>().InstancePerDependency(); 2.Per Lifetime Scope:这个作用 ...
【M15】了解异常处理（exception handling）的成本
1.为了在运行期处理异常,程序必须做大量额外的工作.比如,即使抛出异常,也必须保证离开作用域的栈上对象执行析构方法.因此,必须记录try语句的进入点和离开点,记录catch语句能够处理的异常等.这就意 ...
HDU 4821 String hash
String Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.action ...
使用C# 生成word记录
private void button1_Click(object sender, System.EventArgs e) { object oMissing = System.Reflection. ...
OpenscenGraph中控制swapbuffer的方法（用于多机大屏幕同步显示机制）
**************************************************************************************************** ...
GitHub使用详解
1.GitHub是什么? GitHub这个名词既可以是那个流行的代码分享和协作网站 https://github.com/,也可以是指Git客户端工具(与其他的Git客户端工具如GitEye类似,只不 ...

css3 颜色记