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

随机推荐

MSGPACK（一）
MSGPACK跨平台的数据序列规范,为多种语言所支持.用它序列还是还原数据都异常方便. 而且它支持序列的数据格式非常之多,因为它支持的数据格式多,所以MSGPACK的第二功用:缓存. DELPHI的M ...
[iOS微博项目 - 1.1] - 设置导航栏主题（统一样式）
A.导航栏两侧文字按钮 1.需求: 所有导航栏两侧的文字式按钮统一样式普通样式:橙色高亮样式:红色不可用样式:亮灰阴影:不使用字体大小:15 github: https://github ...
Educational Codeforces Round 1(D. Igor In the Museum) (BFS+离线访问)
题目链接:http://codeforces.com/problemset/problem/598/D 题意是给你一张行为n宽为m的图 k个询问点 ,求每个寻问点所在的封闭的一个上下左右连接的块所能 ...
The plot Function in matlab
from http://pundit.pratt.duke.edu/wiki/MATLAB:Plotting The plot Function The plot function is used t ...
AOV网络拓扑排序
这个算法,主要是为输出一个无环图的拓扑序列算法思想: 主要依赖一个栈,用来存放没有入度的节点,每次读取栈顶元素,并将栈顶元素的后继节点入度减一,如果再次出现入度为零的节点,就加入到栈中.参考< ...
HibernateDaoSupport的使用
1.HibernateDaoSupport是有spring提供的一个hibernate模版工具类,或不多说,直接上代码接口 IGenericDao.java package org.hibernat ...
Unix-Linux编程实践学习点滴
1.结构体最后定义一个char p[0]有什么作用 2. 3. 4. 1.结构体最后定义一个char p[0] 有什么作用这是个广泛使用的常见技巧,常用来构成缓冲区.比起指针,用空数组有这样的优势: ...
JAVA实现HTTPserver端
用java socket实现了一个简单的httpserver, 能够处理GET, POST,以及带一个附件的multipart类型的POST.尽管中途遇到了非常多问题, 只是通过在论坛和几个高手交流了 ...
Codeforces Gym 100637A A. Nano alarm-clocks 前缀和
A. Nano alarm-clocks Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100637/p ...
Hanoi Tower问题分析
前言回家休息第3天了,状态一直不是太好,主要是要补牙,检查身体,见同学见亲戚,心里又着急校招,难得能腾出时间来好好思考,这里也是看<cracking the coding interview& ...

css3 颜色记