css3 颜色记
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);
order:1px solid;
}
css3颜色完。学习之路，不完
相关文章
最新发布
阅读排行
热门文章
猜你喜欢