您的位置:首页> 前端教程> CSS教程
文章导航

CSS 颜色值类型

2018-8-6 01:15| 作者: admin| 查看: 1004| 评论: 0|来自: 蚂蚁部落

CSS中有多种颜色表示模式,下面就分别做一下介绍。

一.颜色关键字:

比如直接使用blue、red或者black这样的关键字作为颜色值。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

二.RGB模式:

RGB模式表示颜色是由red、green和blue三种颜色混合而成。

每一种颜色的最小值是0,最大值是255。

0表示没有对应的颜色,255表示纯色。

例如rgb(255,0,0)表示纯红色,rgb(0,255,0)纯绿色,rgb(0,0,255)纯蓝色,rgb(255,255,255)黑色。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted rgb(125,255,158);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的代码通过RGB模式设置边框的颜色值。

三.RGBA模式(CSS3新增):

此模式和上面的模式非常类似,只不过添加了一个透明度模式。

RGBA中的"A"是"Alpha"的缩写,用来规定透明度的,值介于(0-1)之间。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted rgba(125,255,158,0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的代码可以将边框透明度设置为0.5。

四.十六进制颜色颜色模式:

十六进制颜色值简称HEX,颜色值前面带有#号,格式可以描述为如下:

[CSS] 纯文本查看 复制代码
#RRGGBB

每两位上的值就是RGB上的数字转换16进制后的值。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted #FF33AA;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的代码可以将边框颜色值设置为#FF33AA。

特别说明:如果每两位16进制数是重复的,就如同上面的例子,可以将颜色值简写一半:

[CSS] 纯文本查看 复制代码
color: #f3a;

五.HSL颜色模式CSS3新增:

HSL就是色调(Hue)、饱和度(Saturation)和亮度(Lightness)的缩写。

通过三个颜色通道的叠加实现调节颜色的功能。

H:0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360。

S:取值为:0.0% - 100.0%;0% 意味着灰色,而 100% 是全彩

L:取值为:0.0% - 100.0%;0% 是黑色,100% 是白色。

看一段代码实例,它演示了色调的分步规律:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 360; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(' + index + ',100%, 50%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

是不是红、橙、黄、绿、青、蓝、紫的分布规律非常清晰了。

下面是演示颜色饱和度的代码:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 100; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(100,' + index + '%, 50%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

饱和度从灰色到全彩的变化也是一目了然。

下面对于亮度的演示,代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 100; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(100,100%, ' + index + '%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

下面再看一下HSLA的使用,这个就比较简单了,A就是设置透明度的,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  margin:10px;
  width:150px;
  height:50px;
  text-align:center;
  line-height:50px;
}
div:first-child {
  background-color: hsla(100,100%,54%,0.3)
}
div:last-child {
  background-color: hsl(100,100%,54%)
}
</style>
</head>
<body>
<div>蚂蚁部落</div>
<div>蚂蚁部落</div>
</body>
</html>
1

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部